<!doctype html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  
    
      
    

    
  

  
    
      
    

    
  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic|Roboto:300,300italic,400,400italic,700,700italic|Georgia:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="用Hexo搭建博客,Hexo github,Hexo Coding,Next 定制," />





  <link rel="alternate" href="https://www.leolan.top/atom.xml" title="LeoLan's Blog" type="application/atom+xml" />




  <link rel="shortcut icon" type="image/x-icon" href="/200.png?v=5.1.0" />






<meta name="description" content="安装HexoHexo是用node-js写的，hexo生成静态页面的速度要比较快，hexo是本地生成html再上传。官网：https://hexo.io/zh-cn/docs/
安装Node.js官网下载对应平台安装包安装：https://nodejs.org详见：Node.js开发环境搭建
安装Hexo12345npm install -g hexo-cli  #Mac下西安**sudo -i">
<meta property="og:type" content="article">
<meta property="og:title" content="用Hexo搭建博客">
<meta property="og:url" content="https://www.leolan.top/posts/23632/index.html">
<meta property="og:site_name" content="LeoLan's Blog">
<meta property="og:description" content="安装HexoHexo是用node-js写的，hexo生成静态页面的速度要比较快，hexo是本地生成html再上传。官网：https://hexo.io/zh-cn/docs/
安装Node.js官网下载对应平台安装包安装：https://nodejs.org详见：Node.js开发环境搭建
安装Hexo12345npm install -g hexo-cli  #Mac下西安**sudo -i">
<meta property="og:image" content="http://ofyfogrgx.bkt.clouddn.com/blog/20161206/152548232.png">
<meta property="og:image" content="http://ofyfogrgx.bkt.clouddn.com/222054761.png">
<meta property="og:image" content="http://ofyfogrgx.bkt.clouddn.com/blog/20161115/170352768.png">
<meta property="og:image" content="http://ofyfogrgx.bkt.clouddn.com/duoshuo_userid1.png">
<meta property="og:image" content="http://ofyfogrgx.bkt.clouddn.com/duoshuo_userid2.png">
<meta property="og:image" content="http://ofyfogrgx.bkt.clouddn.com/blog/20161205/100022200.png">
<meta property="og:image" content="http://ofyfogrgx.bkt.clouddn.com/blog/20161205/111721588.png">
<meta property="og:image" content="http://ofyfogrgx.bkt.clouddn.com/blog/20161205/154359849.png">
<meta property="og:image" content="http://ofyfogrgx.bkt.clouddn.com//blog/%E5%9F%9F%E5%90%8D%E7%BB%91%E5%AE%9A.png">
<meta property="og:updated_time" content="2016-12-07T12:35:12.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="用Hexo搭建博客">
<meta name="twitter:description" content="安装HexoHexo是用node-js写的，hexo生成静态页面的速度要比较快，hexo是本地生成html再上传。官网：https://hexo.io/zh-cn/docs/
安装Node.js官网下载对应平台安装包安装：https://nodejs.org详见：Node.js开发环境搭建
安装Hexo12345npm install -g hexo-cli  #Mac下西安**sudo -i">
<meta name="twitter:image" content="http://ofyfogrgx.bkt.clouddn.com/blog/20161206/152548232.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    sidebar: {"position":"left","display":"post"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '6343395544286627000',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: "",
      labels: ""
    }
  };
</script>



  <link rel="canonical" href="https://www.leolan.top/posts/23632/"/>





  <title> 用Hexo搭建博客 | LeoLan's Blog </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  










  
  
    
  

  <div class="container one-collumn sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">LeoLan's Blog</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle">有时候正是不报期望的人做出了人们不敢期望之事！</p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签云
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            时间轴
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-guestbook">
          <a href="/guestbook" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-commenting"></i> <br />
            
            给我留言
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
            
            本地搜索
          </a>
        </li>
               
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup">
 <span class="search-icon fa fa-search"></span>
 <input type="text" id="local-search-input">
 <div id="local-search-result"></div>
 <span class="popup-btn-close">close</span>
</div>


    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
  <link itemprop="mainEntityOfPage" href="https://www.leolan.top/posts/23632/">

  <span style="display:none" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="name" content="LeoLan">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="/images/avatar.jpg">
  </span>

  <span style="display:none" itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="LeoLan's Blog">
    <span style="display:none" itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
      <img style="display:none;" itemprop="url image" alt="LeoLan's Blog" src="">
    </span>
  </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                用Hexo搭建博客
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time title="Post created" itemprop="dateCreated datePublished" datetime="2016-11-08T15:20:01+08:00">
              2016-11-08
            </time>

            &nbsp;|&nbsp;

            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-check-o"></i>
            </span>
            <time title="Post modified" itemprop="dateModified" datetime="2016-12-07T20:35:12+08:00">
              2016-12-07
            </time>
            
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/环境搭建/" itemprop="url" rel="index">
                    <span itemprop="name">环境搭建</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/posts/23632/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="posts/23632/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          

          
          
             <span id="/posts/23632/" class="leancloud_visitors" data-flag-title="用Hexo搭建博客">
               &nbsp; | &nbsp;
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               <span class="post-meta-item-text">阅读次数 </span>
               <span class="leancloud-visitors-count"></span>
              </span>
          

         <span class="post-time">
     &nbsp; | &nbsp;
           <span class="post-meta-item-icon">
             <i class="fa fa-calendar-o"></i>
           </span>
           <span class="post-meta-item-text">字数统计:</span>
           <span class="post-count">10,748(字)</span>
           
         </span>


          
          
          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <script src="/assets/js/DPlayer.min.js"> </script><script src="/assets/js/APlayer.min.js"> </script><h1 id="安装Hexo"><a href="#安装Hexo" class="headerlink" title="安装Hexo"></a>安装Hexo</h1><p>Hexo是用node-js写的，hexo生成静态页面的速度要比较快，hexo是本地生成html再上传。<br>官网：<a href="https://hexo.io/zh-cn/docs/" target="_blank" rel="external">https://hexo.io/zh-cn/docs/</a></p>
<h2 id="安装Node-js"><a href="#安装Node-js" class="headerlink" title="安装Node.js"></a>安装Node.js</h2><p>官网下载对应平台安装包安装：<a href="https://nodejs.org" target="_blank" rel="external">https://nodejs.org</a><br>详见：<a href="http://leolan.top/2016/11/02/%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA-2016-11-02-Node-js%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/" target="_blank" rel="external">Node.js开发环境搭建</a></p>
<h2 id="安装Hexo-1"><a href="#安装Hexo-1" class="headerlink" title="安装Hexo"></a>安装Hexo</h2><figure class="highlight mipsasm"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">npm <span class="keyword">install </span>-g hexo-cli  <span class="comment">#Mac下西安**sudo -i**切换到root权限。</span></div><div class="line">hexo init <span class="keyword">blog </span>          <span class="comment">#blog文件夹要先建好，这一步自动生成网站。</span></div><div class="line">cd <span class="keyword">blog</span></div><div class="line">npm <span class="keyword">install </span>             <span class="comment">#安装依赖的插件。</span></div><div class="line">hexo server              <span class="comment">#运行服务</span></div></pre></td></tr></table></figure>
<p>这时可以在浏览器打开网页。<code>hexo server</code>的简化命令为<code>hexo s</code>；指定端口：<code>-p xxxx</code><br>和jekyll一样是通过修改<strong>_config.yml</strong>文件来配置站点信息的。（在Hexo中，根目录下的<strong>_config.yml</strong>文件是用来配置网站信息的；主题目录下的<strong>_config.yml</strong>文件是用来配置文章主题，页面等等的）</p>
<p>默认的目录结构如下：</p>
<figure class="highlight haxe"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">├── .deploy       <span class="meta">#执行hexo deploy命令部署到GitHub上的内容目录</span></div><div class="line">├── <span class="keyword">public</span>        <span class="meta">#执行hexo generate命令，输出的静态网页内容目录</span></div><div class="line">├── scaffolds     <span class="meta">#layout模板文件目录，其中的md文件可以添加编辑</span></div><div class="line">├── scripts       <span class="meta">#扩展脚本目录，这里可以自定义一些javascript脚本</span></div><div class="line">├── source        <span class="meta">#文章源码目录，该目录下的markdown和html文件均会被hexo处理。404文件，CNAME文件等都应该放这里。</span></div><div class="line">| ├── _drafts     <span class="meta">#草稿文章</span></div><div class="line">| └── _posts      <span class="meta">#发布的文章</span></div><div class="line">├── themes        <span class="meta">#主题文件目录</span></div><div class="line">├── _config.yml   <span class="meta">#全局配置文件，大多数的设置都在这里</span></div><div class="line">└── <span class="keyword">package</span>.json  <span class="meta">#应用程序数据，指明hexo的版本等信息。在push到github时提示*.json错误，删掉这个文件或删掉db.json就行。</span></div></pre></td></tr></table></figure>
<hr>
<h1 id="配置优化、定制站点"><a href="#配置优化、定制站点" class="headerlink" title="配置优化、定制站点"></a>配置优化、定制站点</h1><p>Next官方设置说明：<a href="http://theme-next.iissnan.com/getting-started.html" target="_blank" rel="external">http://theme-next.iissnan.com/getting-started.html</a></p>
<h2 id="站点配置"><a href="#站点配置" class="headerlink" title="站点配置"></a>站点配置</h2><p>以下是我的配置文件：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div><div class="line">121</div><div class="line">122</div><div class="line">123</div><div class="line">124</div><div class="line">125</div><div class="line">126</div><div class="line">127</div><div class="line">128</div><div class="line">129</div><div class="line">130</div><div class="line">131</div><div class="line">132</div><div class="line">133</div><div class="line">134</div><div class="line">135</div><div class="line">136</div><div class="line">137</div><div class="line">138</div><div class="line">139</div><div class="line">140</div><div class="line">141</div><div class="line">142</div><div class="line">143</div><div class="line">144</div><div class="line">145</div><div class="line">146</div><div class="line">147</div><div class="line">148</div><div class="line">149</div><div class="line">150</div><div class="line">151</div><div class="line">152</div><div class="line">153</div><div class="line">154</div><div class="line">155</div><div class="line">156</div><div class="line">157</div><div class="line">158</div><div class="line">159</div><div class="line">160</div><div class="line">161</div><div class="line">162</div><div class="line">163</div><div class="line">164</div><div class="line">165</div><div class="line">166</div><div class="line">167</div><div class="line">168</div><div class="line">169</div><div class="line">170</div><div class="line">171</div><div class="line">172</div><div class="line">173</div><div class="line">174</div><div class="line">175</div><div class="line">176</div><div class="line">177</div><div class="line">178</div><div class="line">179</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># Hexo Configuration</span></div><div class="line"><span class="comment">## Docs: https://hexo.io/docs/configuration.html</span></div><div class="line"><span class="comment">## Source: https://github.com/hexojs/hexo/</span></div><div class="line"></div><div class="line"><span class="comment"># Site</span></div><div class="line"><span class="attr">title:</span> Leo Lan的博客</div><div class="line"><span class="attr">subtitle:</span>  有时候正是不报期望的人做出了人们不敢期望之事！</div><div class="line"><span class="attr">description:</span> Better late than never</div><div class="line"><span class="attr">author:</span> LeoLan</div><div class="line"><span class="attr">language:</span> zh-Hans</div><div class="line"><span class="attr">timezone:</span> Asia/Shanghai</div><div class="line"></div><div class="line"><span class="comment"># URL</span></div><div class="line"><span class="comment">## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'</span></div><div class="line"><span class="attr">url:</span> https://www.leolan.top</div><div class="line"><span class="attr">coding_url:</span> https://www.leolan.top</div><div class="line"><span class="attr">root:</span> /</div><div class="line"><span class="attr">permalink:</span> posts/:abbrlink/</div><div class="line"><span class="attr">permalink_defaults:</span></div><div class="line"></div><div class="line"><span class="comment"># Directory</span></div><div class="line"><span class="attr">source_dir:</span> source</div><div class="line"><span class="attr">public_dir:</span> public</div><div class="line"><span class="attr">tag_dir:</span> tags</div><div class="line"><span class="attr">archive_dir:</span> archives</div><div class="line"><span class="attr">category_dir:</span> categories</div><div class="line"><span class="attr">code_dir:</span> downloads/code</div><div class="line"><span class="attr">i18n_dir:</span> :lang</div><div class="line"><span class="comment">#禁止编译README.md文件，也可以在文件中增加yml文件头layout: false，---结尾</span></div><div class="line"><span class="attr">skip_render:</span></div><div class="line"><span class="bullet">    -</span> baidu_verify_dc4dBM4StW.html</div><div class="line"><span class="bullet">    -</span> googled7e43f3624e0f703.html</div><div class="line"><span class="bullet">    -</span> CNAME</div><div class="line"><span class="bullet">    -</span> README.md</div><div class="line"><span class="bullet">    -</span> .nojekyll</div><div class="line"><span class="bullet">    -</span> Staticfile</div><div class="line"></div><div class="line"><span class="comment">#强制包含.nojekyll文件（放在source下），这样hexo g时，.开头的文件具不会被忽略，适用于5.0以下版本的next主题（github屏蔽了一些文件夹）</span></div><div class="line"><span class="attr">include:</span></div><div class="line"><span class="bullet">  -</span> .nojekyll</div><div class="line"></div><div class="line"><span class="comment"># abbrlink config 生成文章永久链接（利于SEO）需要安装插件</span></div><div class="line"><span class="attr">abbrlink:</span></div><div class="line"><span class="attr">  alg:</span> crc16  <span class="comment"># 算法：crc16(default) and crc32 </span></div><div class="line"><span class="attr">  rep:</span> dec    <span class="comment"># 进制：dec(default) and hex</span></div><div class="line"></div><div class="line"><span class="attr">baidu_url_submit:</span>  <span class="comment">#百度链接推送，推送刚刚生成的永久链接</span></div><div class="line"><span class="attr">  count:</span> <span class="number">5</span> <span class="comment">## 比如3，代表提交最新的三个链接</span></div><div class="line"><span class="attr">  host:</span> www.leolan.top <span class="comment">## 在百度站长平台中注册的域名</span></div><div class="line"><span class="attr">  token:</span> kZ5xboXBFPxQ0g7N <span class="comment">## 请注意这是您的秘钥， 请不要发布在公众仓库里!</span></div><div class="line"><span class="attr">  path:</span> /baidu_urls.txt <span class="comment">## 文本文档的地址， 新链接会保存在此文本文档里</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Writing  官网：https://hexo.io/zh-cn/docs/writing.html</span></div><div class="line"><span class="attr">new_post_name:</span> :year-:month-:day-:title.md <span class="comment"># File name of new posts</span></div><div class="line"><span class="attr">default_layout:</span> post</div><div class="line"><span class="attr">titlecase:</span> <span class="literal">false</span> <span class="comment"># Transform title into titlecase</span></div><div class="line"><span class="attr">external_link:</span> <span class="literal">true</span> <span class="comment"># Open external links in new tab</span></div><div class="line"><span class="attr">filename_case:</span> <span class="number">0</span></div><div class="line"><span class="attr">render_drafts:</span> <span class="literal">false</span></div><div class="line"><span class="attr">post_asset_folder:</span> <span class="literal">false</span>   <span class="comment">#新建文章时自动生成本地存放图片等资源的文件夹</span></div><div class="line"><span class="attr">relative_link:</span> <span class="literal">false</span></div><div class="line"><span class="attr">future:</span> <span class="literal">true</span></div><div class="line"><span class="attr">highlight:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  line_number:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  auto_detect:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  tab_replace:</span></div><div class="line"></div><div class="line"><span class="comment"># Category &amp; Tag</span></div><div class="line"><span class="attr">default_category:</span> uncategorized</div><div class="line"><span class="attr">category_map:</span></div><div class="line"><span class="attr">tag_map:</span></div><div class="line"></div><div class="line"><span class="comment"># Date / Time format</span></div><div class="line"><span class="comment">## Hexo uses Moment.js to parse and display date</span></div><div class="line"><span class="comment">## You can customize the date format as defined in</span></div><div class="line"><span class="comment">## http://momentjs.com/docs/#/displaying/format/</span></div><div class="line"><span class="attr">date_format:</span> YYYY-MM-DD</div><div class="line"><span class="attr">time_format:</span> HH:mm:ss</div><div class="line"></div><div class="line"><span class="comment"># Pagination  单独页面文章数目，需要安装以下3个插件</span></div><div class="line"><span class="comment">#npm install --save hexo-generator-index</span></div><div class="line"><span class="comment">#npm install --save hexo-generator-archive</span></div><div class="line"><span class="comment">#npm install --save hexo-generator-tag</span></div><div class="line"><span class="comment">## Set per_page to 0 to disable pagination</span></div><div class="line"><span class="attr">index_generator:</span></div><div class="line"><span class="attr">  per_page:</span> <span class="number">5</span></div><div class="line"></div><div class="line"><span class="attr">archive_generator:</span></div><div class="line"><span class="attr">  per_page:</span> <span class="number">20</span></div><div class="line"><span class="attr">  yearly:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  monthly:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="attr">tag_generator:</span></div><div class="line"><span class="attr">  per_page:</span> <span class="number">10</span></div><div class="line"></div><div class="line"><span class="attr">pagination_dir:</span> page</div><div class="line"></div><div class="line"><span class="comment"># Extensions 主题选择</span></div><div class="line"><span class="comment">## Plugins: https://hexo.io/plugins/</span></div><div class="line"><span class="comment">## Themes: https://hexo.io/themes/</span></div><div class="line"><span class="attr">theme:</span> next5<span class="number">.1</span></div><div class="line"><span class="comment">#theme: next0.4</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Deployment 自动部署到仓库</span></div><div class="line"><span class="comment">## 官方文档Docs: https://hexo.io/docs/deployment.html   有部署到各种服务器的方法</span></div><div class="line"><span class="comment">## 参考：http://www.lxway.com/240950852.htm</span></div><div class="line"><span class="comment">#不管是github还是coding，type都填写git</span></div><div class="line"><span class="attr">deploy:</span></div><div class="line"><span class="attr">- type:</span> git</div><div class="line"><span class="attr">  repo:</span> git@git.coding.net:leolan/blog.git,master</div><div class="line"><span class="attr">  message:</span> <span class="string">'LeoLan updated：<span class="template-variable">&#123;&#123;now("YYYY-MM-DD HH:mm:ss")&#125;&#125;</span>'</span>  <span class="comment">#这个是commit的说明，因为是发布站点，方便看到发布时间。</span></div><div class="line"><span class="attr">- type:</span> git</div><div class="line"><span class="attr">  repo:</span> git@github.com:MyLeoLan/blog.git,master</div><div class="line"><span class="attr">  message:</span> <span class="string">'LeoLan updated：<span class="template-variable">&#123;&#123;now("YYYY-MM-DD HH:mm:ss")&#125;&#125;</span>'</span></div><div class="line"><span class="comment">#deploy:</span></div><div class="line"><span class="comment">#- type: git</span></div><div class="line"><span class="comment">#  repo:</span></div><div class="line"><span class="comment">#- type: heroku（另一种云平台）</span></div><div class="line"><span class="comment">#  repo:</span></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Disqus #Disqus评论系统</span></div><div class="line"><span class="attr">disqus_shortname:</span> leolan</div><div class="line"></div><div class="line"></div><div class="line"><span class="comment">#plugins: #插件，例如生成 RSS 和站点地图的</span></div><div class="line"><span class="comment">#hexo-generator-sitemap</span></div><div class="line"><span class="comment">#- hexo-generator-baidu-sitemap</span></div><div class="line"><span class="attr">plugins:</span></div><div class="line">  hexo-generator-feed</div><div class="line">  hexo-generator-baidu-sitemap</div><div class="line"></div><div class="line"><span class="attr">sitemap:</span></div><div class="line"><span class="attr">  path:</span> sitemap.xml    </div><div class="line"><span class="attr">baidusitemap:</span></div><div class="line"><span class="attr">  path:</span> baidusitemap.xml</div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Social links 社交链接</span></div><div class="line"><span class="attr">social:</span></div><div class="line"><span class="attr">  GitHub:</span> https://github.com/myleolan</div><div class="line"><span class="attr">  Coding:</span> https://coding.net/u/leolan</div><div class="line"><span class="attr">  CSDN:</span> http://blog.csdn.net/lan842632</div><div class="line"><span class="attr">  OSchina:</span> https://my.oschina.net/leolan/blog</div><div class="line">  <span class="comment">#Twitter: https://twitter.com/lmintlcx</span></div><div class="line">  <span class="comment">#Zhihu: http://www.zhihu.com/people/lmintlcx</span></div><div class="line">  <span class="comment">#Douban: http://www.douban.com/people/lmintlcx</span></div><div class="line">  <span class="comment">#Weibo: http://weibo.com/u/3233729080</span></div><div class="line"></div><div class="line"><span class="attr">duoshuo_shortname:</span> leolan</div><div class="line"><span class="comment"># 多说热评文章 true 或者 false</span></div><div class="line"><span class="attr">duoshuo_hotartical:</span> <span class="literal">true</span></div><div class="line"><span class="comment"># 多说分享服务</span></div><div class="line"><span class="attr">duoshuo_share:</span> <span class="literal">true</span></div><div class="line"><span class="comment"># 百度分享服务</span></div><div class="line"><span class="attr">baidushare:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment">#打赏功能</span></div><div class="line"><span class="attr">reward_comment:</span> 您的支持将鼓励我继续创作,非常感谢！</div><div class="line"><span class="attr">alipay:</span> http://ofyfogrgx.bkt.clouddn.com//pay/alipay.jpg</div><div class="line"><span class="attr">wechatpay:</span> http://ofyfogrgx.bkt.clouddn.com//pay/weixinpay.png</div><div class="line"></div><div class="line"><span class="comment">#站点建立时间</span></div><div class="line"><span class="attr">since:</span> <span class="number">2016</span></div><div class="line"></div><div class="line"><span class="comment">#百度分析</span></div><div class="line"><span class="attr">baidu_analytics:</span> dc0e85252eeff3a87aa87f35d92a8d33</div><div class="line"></div><div class="line"><span class="comment">#本地搜索</span></div><div class="line"><span class="attr">search:</span></div><div class="line"><span class="attr">  path:</span> search.xml</div><div class="line"><span class="attr">  field:</span> post</div><div class="line"><span class="attr">  format:</span> html</div><div class="line"><span class="attr">  limit:</span> <span class="number">10000</span></div></pre></td></tr></table></figure>
<h2 id="主题配置"><a href="#主题配置" class="headerlink" title="主题配置"></a>主题配置</h2><p>推荐Next主题，简单简洁，官网：<a href="http://theme-next.iissnan.com/" target="_blank" rel="external">http://theme-next.iissnan.com/</a><br>安装最新版：<br><figure class="highlight vim"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">cd</span> your-hexo-site</div><div class="line">git clone http<span class="variable">s:</span>//github.<span class="keyword">com</span>/iissnan/hexo-theme-<span class="keyword">next</span> themes/<span class="keyword">next</span></div></pre></td></tr></table></figure></p>
<p>在主题目录下可以看到next文件夹，修改<strong>站点配置文件_config.yml</strong>中的<code>theme: next</code><br><code>hexo clean &amp;&amp; hexo s</code>就可以看到新主题生效啦！<br>接下来修改<strong>主题配置文件_config.yml</strong>，以下是我的配置。<br><figure class="highlight yaml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div><div class="line">121</div><div class="line">122</div><div class="line">123</div><div class="line">124</div><div class="line">125</div><div class="line">126</div><div class="line">127</div><div class="line">128</div><div class="line">129</div><div class="line">130</div><div class="line">131</div><div class="line">132</div><div class="line">133</div><div class="line">134</div><div class="line">135</div><div class="line">136</div><div class="line">137</div><div class="line">138</div><div class="line">139</div><div class="line">140</div><div class="line">141</div><div class="line">142</div><div class="line">143</div><div class="line">144</div><div class="line">145</div><div class="line">146</div><div class="line">147</div><div class="line">148</div><div class="line">149</div><div class="line">150</div><div class="line">151</div><div class="line">152</div><div class="line">153</div><div class="line">154</div><div class="line">155</div><div class="line">156</div><div class="line">157</div><div class="line">158</div><div class="line">159</div><div class="line">160</div><div class="line">161</div><div class="line">162</div><div class="line">163</div><div class="line">164</div><div class="line">165</div><div class="line">166</div><div class="line">167</div><div class="line">168</div><div class="line">169</div><div class="line">170</div><div class="line">171</div><div class="line">172</div><div class="line">173</div><div class="line">174</div><div class="line">175</div><div class="line">176</div><div class="line">177</div><div class="line">178</div><div class="line">179</div><div class="line">180</div><div class="line">181</div><div class="line">182</div><div class="line">183</div><div class="line">184</div><div class="line">185</div><div class="line">186</div><div class="line">187</div><div class="line">188</div><div class="line">189</div><div class="line">190</div><div class="line">191</div><div class="line">192</div><div class="line">193</div><div class="line">194</div><div class="line">195</div><div class="line">196</div><div class="line">197</div><div class="line">198</div><div class="line">199</div><div class="line">200</div><div class="line">201</div><div class="line">202</div><div class="line">203</div><div class="line">204</div><div class="line">205</div><div class="line">206</div><div class="line">207</div><div class="line">208</div><div class="line">209</div><div class="line">210</div><div class="line">211</div><div class="line">212</div><div class="line">213</div><div class="line">214</div><div class="line">215</div><div class="line">216</div><div class="line">217</div><div class="line">218</div><div class="line">219</div><div class="line">220</div><div class="line">221</div><div class="line">222</div><div class="line">223</div><div class="line">224</div><div class="line">225</div><div class="line">226</div><div class="line">227</div><div class="line">228</div><div class="line">229</div><div class="line">230</div><div class="line">231</div><div class="line">232</div><div class="line">233</div><div class="line">234</div><div class="line">235</div><div class="line">236</div><div class="line">237</div><div class="line">238</div><div class="line">239</div><div class="line">240</div><div class="line">241</div><div class="line">242</div><div class="line">243</div><div class="line">244</div><div class="line">245</div><div class="line">246</div><div class="line">247</div><div class="line">248</div><div class="line">249</div><div class="line">250</div><div class="line">251</div><div class="line">252</div><div class="line">253</div><div class="line">254</div><div class="line">255</div><div class="line">256</div><div class="line">257</div><div class="line">258</div><div class="line">259</div><div class="line">260</div><div class="line">261</div><div class="line">262</div><div class="line">263</div><div class="line">264</div><div class="line">265</div><div class="line">266</div><div class="line">267</div><div class="line">268</div><div class="line">269</div><div class="line">270</div><div class="line">271</div><div class="line">272</div><div class="line">273</div><div class="line">274</div><div class="line">275</div><div class="line">276</div><div class="line">277</div><div class="line">278</div><div class="line">279</div><div class="line">280</div><div class="line">281</div><div class="line">282</div><div class="line">283</div><div class="line">284</div><div class="line">285</div><div class="line">286</div><div class="line">287</div><div class="line">288</div><div class="line">289</div><div class="line">290</div><div class="line">291</div><div class="line">292</div><div class="line">293</div><div class="line">294</div><div class="line">295</div><div class="line">296</div><div class="line">297</div><div class="line">298</div><div class="line">299</div><div class="line">300</div><div class="line">301</div><div class="line">302</div><div class="line">303</div><div class="line">304</div><div class="line">305</div><div class="line">306</div><div class="line">307</div><div class="line">308</div><div class="line">309</div><div class="line">310</div><div class="line">311</div><div class="line">312</div><div class="line">313</div><div class="line">314</div><div class="line">315</div><div class="line">316</div><div class="line">317</div><div class="line">318</div><div class="line">319</div><div class="line">320</div><div class="line">321</div><div class="line">322</div><div class="line">323</div><div class="line">324</div><div class="line">325</div><div class="line">326</div><div class="line">327</div><div class="line">328</div><div class="line">329</div><div class="line">330</div><div class="line">331</div><div class="line">332</div><div class="line">333</div><div class="line">334</div><div class="line">335</div><div class="line">336</div><div class="line">337</div><div class="line">338</div><div class="line">339</div><div class="line">340</div><div class="line">341</div><div class="line">342</div><div class="line">343</div><div class="line">344</div><div class="line">345</div><div class="line">346</div><div class="line">347</div><div class="line">348</div><div class="line">349</div><div class="line">350</div><div class="line">351</div><div class="line">352</div><div class="line">353</div><div class="line">354</div><div class="line">355</div><div class="line">356</div><div class="line">357</div><div class="line">358</div><div class="line">359</div><div class="line">360</div><div class="line">361</div><div class="line">362</div><div class="line">363</div><div class="line">364</div><div class="line">365</div><div class="line">366</div><div class="line">367</div><div class="line">368</div><div class="line">369</div><div class="line">370</div><div class="line">371</div><div class="line">372</div><div class="line">373</div><div class="line">374</div><div class="line">375</div><div class="line">376</div><div class="line">377</div><div class="line">378</div><div class="line">379</div><div class="line">380</div><div class="line">381</div><div class="line">382</div><div class="line">383</div><div class="line">384</div><div class="line">385</div><div class="line">386</div><div class="line">387</div><div class="line">388</div><div class="line">389</div><div class="line">390</div><div class="line">391</div><div class="line">392</div><div class="line">393</div><div class="line">394</div><div class="line">395</div><div class="line">396</div><div class="line">397</div><div class="line">398</div><div class="line">399</div><div class="line">400</div><div class="line">401</div><div class="line">402</div><div class="line">403</div><div class="line">404</div><div class="line">405</div><div class="line">406</div><div class="line">407</div><div class="line">408</div><div class="line">409</div><div class="line">410</div><div class="line">411</div><div class="line">412</div><div class="line">413</div><div class="line">414</div><div class="line">415</div><div class="line">416</div><div class="line">417</div><div class="line">418</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Site Information Settings</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># Put your favicon.ico into `hexo-site/source/` directory.</span></div><div class="line"><span class="attr">favicon:</span> /<span class="number">200.</span>png</div><div class="line"></div><div class="line"><span class="comment"># Set default keywords (Use a comma to separate) 站点关键词，利于SEO</span></div><div class="line"><span class="attr">keywords:</span> <span class="string">"Hexo, NexT, Leo Lan, leolan, Blog, myleolan, lan, coding"</span></div><div class="line"></div><div class="line"><span class="comment"># Set rss to false to disable feed link.</span></div><div class="line"><span class="comment"># Leave rss as empty to use site's feed link.</span></div><div class="line"><span class="comment"># Set rss to specific value if you have burned your feed already.</span></div><div class="line"><span class="attr">rss:</span></div><div class="line"></div><div class="line"><span class="comment"># Specify the date when the site was setup</span></div><div class="line"><span class="comment">#since: 2015</span></div><div class="line"></div><div class="line"><span class="comment"># Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.</span></div><div class="line"><span class="comment"># See: https://support.google.com/webmasters/answer/139066</span></div><div class="line"><span class="comment"># Tips: Before you open this tag, remeber set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )</span></div><div class="line"><span class="attr">canonical:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Menu Settings</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -&gt; archives)</span></div><div class="line"><span class="attr">menu:</span></div><div class="line"><span class="attr">  home:</span> /</div><div class="line"><span class="attr">  categories:</span> /categories</div><div class="line"><span class="attr">  tags:</span> /tags</div><div class="line"><span class="attr">  archives:</span> /archives</div><div class="line"><span class="attr">  about:</span> /about</div><div class="line"><span class="attr">  guestbook:</span> /guestbook</div><div class="line"> <span class="comment"># schedule: /schedule</span></div><div class="line">  <span class="comment">#commonweal: /404.html</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Enable/Disable menu icons.  菜单图标</span></div><div class="line"><span class="comment"># Icon Mapping:</span></div><div class="line"><span class="comment">#   Map a menu item to a specific FontAwesome icon name.</span></div><div class="line"><span class="comment">#   Key is the name of menu item and value is the name of FontAwsome icon. Key is case-senstive.</span></div><div class="line"><span class="comment">#   When an question mask icon presenting up means that the item has no mapping icon.</span></div><div class="line"><span class="attr">menu_icons:</span>   <span class="comment">#http://fontawesome.io/icons/</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line">  <span class="comment">#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome</span></div><div class="line"><span class="attr">  home:</span> home</div><div class="line"><span class="attr">  about:</span> user</div><div class="line"><span class="attr">  categories:</span> th</div><div class="line"><span class="attr">  schedule:</span> calendar</div><div class="line"><span class="attr">  tags:</span> tags</div><div class="line"><span class="attr">  archives:</span> archive</div><div class="line"><span class="attr">  commonweal:</span> heartbeat</div><div class="line"><span class="attr">  guestbook:</span> commenting</div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Scheme Settings</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># Schemes</span></div><div class="line"><span class="comment">#scheme: Muse</span></div><div class="line"><span class="comment">#scheme: Mist</span></div><div class="line"><span class="attr">scheme:</span> Pisces</div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Font Settings</span></div><div class="line"><span class="comment"># - Find fonts on Google Fonts (https://www.google.com/fonts)</span></div><div class="line"><span class="comment"># - All fonts set here will have the following styles:</span></div><div class="line"><span class="comment">#     light, light italic, normal, normal intalic, bold, bold italic</span></div><div class="line"><span class="comment"># - Be aware that setting too much fonts will cause site running slowly</span></div><div class="line"><span class="comment"># - Introduce in 5.0.1</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="attr">font:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"></div><div class="line">  <span class="comment"># Uri of fonts host. E.g. //fonts.googleapis.com (Default) 慢的话搜索fonts.googleapis.com即可找到替换地址</span></div><div class="line"><span class="attr">  host:</span> fonts.css.network</div><div class="line"></div><div class="line">  <span class="comment"># Global font settings used on &lt;body&gt; element.</span></div><div class="line"><span class="attr">  global:</span></div><div class="line">    <span class="comment"># external: true will load this font family from host.</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span> Lato</div><div class="line"></div><div class="line">  <span class="comment"># Font settings for Headlines (h1, h2, h3, h4, h5, h6)</span></div><div class="line">  <span class="comment"># Fallback to `global` font settings.</span></div><div class="line"><span class="attr">  headings:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span></div><div class="line"></div><div class="line">  <span class="comment"># Font settings for posts</span></div><div class="line">  <span class="comment"># Fallback to `global` font settings.</span></div><div class="line"><span class="attr">  posts:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span></div><div class="line"></div><div class="line">  <span class="comment"># Font settings for Logo</span></div><div class="line">  <span class="comment"># Fallback to `global` font settings.</span></div><div class="line">  <span class="comment"># The `size` option use `px` as unit</span></div><div class="line"><span class="attr">  logo:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span></div><div class="line"><span class="attr">    size:</span></div><div class="line"></div><div class="line">  <span class="comment"># Font settings for &lt;code&gt; and code blocks.</span></div><div class="line"><span class="attr">  codes:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span></div><div class="line"><span class="attr">    size:</span></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Sidebar Settings</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># Social Links 社交链接</span></div><div class="line"><span class="comment"># Key is the link label showing to end users.</span></div><div class="line"><span class="comment"># Value is the target link (E.g. GitHub: https://github.com/iissnan)</span></div><div class="line"><span class="comment">#social:</span></div><div class="line"><span class="comment">#LinkLabel: Link</span></div><div class="line"></div><div class="line"><span class="comment"># Social Links Icons</span></div><div class="line"><span class="comment"># Icon Mapping:</span></div><div class="line"><span class="comment">#   Map a menu item to a specific FontAwesome icon name.</span></div><div class="line"><span class="comment">#   Key is the name of the item and value is the name of FontAwsome icon. Key is case-senstive.</span></div><div class="line"><span class="comment">#   When an globe mask icon presenting up means that the item has no mapping icon.</span></div><div class="line"><span class="attr">social_icons:</span>    <span class="comment">#这是社交链接图标，打开网站找到图标，直接引用名字就行，next已引用了该库http://fontawesome.io/icons/</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line">  <span class="comment"># Icon Mappings.</span></div><div class="line">  <span class="comment"># KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome</span></div><div class="line"><span class="attr">  GitHub:</span> github</div><div class="line"><span class="attr">  Coding:</span> github-alt</div><div class="line"><span class="attr">  Cloud:</span> cloud</div><div class="line"><span class="attr">  OSchina:</span> git-square</div><div class="line">  <span class="comment">#Twitter: twitter</span></div><div class="line">  <span class="comment">#Weibo: weibo</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Sidebar Avatar</span></div><div class="line"><span class="comment"># in theme directory(source/images): /images/avatar.jpg</span></div><div class="line"><span class="comment"># in site  directory(source/uploads): /uploads/avatar.jpg</span></div><div class="line"><span class="attr">avatar:</span> /images/avatar.jpg    <span class="comment">#博客侧边栏显示的头像</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Table Of Contents in the Sidebar</span></div><div class="line"><span class="attr">toc:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"></div><div class="line">  <span class="comment"># Automatically add list number to toc.</span></div><div class="line"><span class="attr">  number:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment"># Creative Commons 4.0 International License.</span></div><div class="line"><span class="comment"># http://creativecommons.org/</span></div><div class="line"><span class="comment"># Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero</span></div><div class="line"><span class="comment">#creative_commons: by-nc-sa</span></div><div class="line"><span class="comment">#creative_commons:</span></div><div class="line"></div><div class="line"><span class="attr">sidebar:</span></div><div class="line">  <span class="comment"># Sidebar Position, available value: left | right</span></div><div class="line"><span class="attr">  position:</span> left</div><div class="line">  <span class="comment">#position: right</span></div><div class="line"></div><div class="line">  <span class="comment"># Sidebar Display, available value: 侧边栏显示</span></div><div class="line">  <span class="comment">#  - post    expand on posts automatically. Default.</span></div><div class="line">  <span class="comment">#  - always  expand for all pages automatically</span></div><div class="line">  <span class="comment">#  - hide    expand only when click on the sidebar toggle icon.</span></div><div class="line">  <span class="comment">#  - remove  Totally remove sidebar including sidebar toggler.</span></div><div class="line"><span class="attr">  display:</span> post</div><div class="line">  <span class="comment">#display: always</span></div><div class="line">  <span class="comment">#display: hide</span></div><div class="line">  <span class="comment">#display: remove</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Blogrolls 友情链接</span></div><div class="line"><span class="attr">links_title:</span> 友链</div><div class="line"><span class="comment">#links_layout: block</span></div><div class="line"><span class="attr">links_icon:</span> heartbeat</div><div class="line"><span class="comment">#links_layout: inline</span></div><div class="line"><span class="attr">links:</span></div><div class="line">  Jerry Locke: https://jerry.hk/</div><div class="line"></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Misc Theme Settings</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># Custom Logo.</span></div><div class="line"><span class="comment"># !!Only available for Default Scheme currently.</span></div><div class="line"><span class="comment"># Options:</span></div><div class="line"><span class="comment">#   enabled: [true/false] - Replace with specific image</span></div><div class="line"><span class="comment">#   image: url-of-image   - Images's url</span></div><div class="line"><span class="attr">custom_logo:</span></div><div class="line"><span class="attr">  enabled:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  image:</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Code Highlight theme  代码高亮主题</span></div><div class="line"><span class="comment"># Available value:</span></div><div class="line"><span class="comment">#    normal | night | night eighties | night blue | night bright</span></div><div class="line"><span class="comment"># https://github.com/chriskempson/tomorrow-theme</span></div><div class="line"><span class="attr">highlight_theme:</span> night eighties</div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Automatically scroll page to section which is under &lt;!-- more --&gt; mark.</span></div><div class="line"><span class="attr">scroll_to_more:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Automatically Excerpt. Not recommand.</span></div><div class="line"><span class="comment"># Please use &lt;!-- more --&gt; in the post to control excerpt accurately.</span></div><div class="line"><span class="attr">auto_excerpt:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  length:</span> <span class="number">150</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Wechat Subscriber 微信打赏</span></div><div class="line"><span class="comment">#wechat_subscriber:</span></div><div class="line">  <span class="comment">#enabled: true</span></div><div class="line">  <span class="comment">#qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg</span></div><div class="line">  <span class="comment">#description: ex. subscribe to my blog by scanning my public wechat account</span></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Third Party Services Settings</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># MathJax Support 数学公式</span></div><div class="line"><span class="attr">mathjax:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  cdn:</span> //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML</div><div class="line"></div><div class="line"><span class="comment">#各种第三方服务</span></div><div class="line"><span class="comment"># Swiftype Search API Key</span></div><div class="line"><span class="comment">#swiftype_key:</span></div><div class="line"></div><div class="line"><span class="comment"># Baidu Analytics ID</span></div><div class="line"><span class="comment">#baidu_analytics:</span></div><div class="line"></div><div class="line"><span class="comment"># Duoshuo ShortName</span></div><div class="line"><span class="comment">#duoshuo_shortname:</span></div><div class="line"></div><div class="line"><span class="comment"># Disqus</span></div><div class="line"><span class="comment">#disqus_shortname:</span></div><div class="line"></div><div class="line"><span class="comment"># Baidu Share</span></div><div class="line"><span class="comment"># Available value:</span></div><div class="line"><span class="comment">#    button | slide</span></div><div class="line"><span class="comment"># Warning: Baidu Share does not support https.</span></div><div class="line"><span class="comment">#baidushare:</span></div><div class="line"><span class="comment">##  type: button</span></div><div class="line"></div><div class="line"><span class="comment"># Share</span></div><div class="line"><span class="attr">jiathis:</span> <span class="literal">true</span></div><div class="line"><span class="comment"># Warning: JiaThis does not support https.</span></div><div class="line"><span class="comment">#add_this_id:</span></div><div class="line"></div><div class="line"><span class="comment"># Share</span></div><div class="line"><span class="attr">duoshuo_share:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment"># Google Webmaster tools verification setting</span></div><div class="line"><span class="comment"># See: https://www.google.com/webmasters/</span></div><div class="line"><span class="comment">#google_site_verification:</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Google Analytics</span></div><div class="line"><span class="comment">#google_analytics:</span></div><div class="line"></div><div class="line"><span class="comment"># CNZZ count</span></div><div class="line"><span class="comment">#cnzz_siteid:</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Make duoshuo show UA</span></div><div class="line"><span class="comment"># user_id must NOT be null when admin_enable is true!</span></div><div class="line"><span class="comment"># you can visit http://dev.duoshuo.com get duoshuo user id.</span></div><div class="line"><span class="attr">duoshuo_info:</span></div><div class="line"><span class="attr">  ua_enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  admin_enable:</span> ture</div><div class="line"><span class="attr">  user_id:</span> <span class="number">6343395544286626562</span></div><div class="line"><span class="attr">  admin_nickname:</span> 博主</div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Facebook SDK Support.</span></div><div class="line"><span class="comment"># https://github.com/iissnan/hexo-theme-next/pull/410</span></div><div class="line"><span class="attr">facebook_sdk:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  app_id:</span>       <span class="comment">#&lt;app_id&gt;</span></div><div class="line"><span class="attr">  fb_admin:</span>     <span class="comment">#&lt;user_id&gt;</span></div><div class="line"><span class="attr">  like_button:</span>  <span class="comment">#true</span></div><div class="line"><span class="attr">  webmaster:</span>    <span class="comment">#true</span></div><div class="line"></div><div class="line"><span class="comment"># Facebook comments plugin</span></div><div class="line"><span class="comment"># This plugin depends on Facebook SDK.</span></div><div class="line"><span class="comment"># If facebook_sdk.enable is false, Facebook comments plugin is unavailable.</span></div><div class="line"><span class="attr">facebook_comments_plugin:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  num_of_posts:</span> <span class="number">10</span>  <span class="comment"># min posts num is 1</span></div><div class="line"><span class="attr">  width:</span> <span class="number">100</span>%       <span class="comment"># default width is 550px</span></div><div class="line"><span class="attr">  scheme:</span> light     <span class="comment"># default scheme is light (light or dark)</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Show number of visitors to each article.</span></div><div class="line"><span class="comment"># You can visit https://leancloud.cn get AppID and AppKey.</span></div><div class="line"><span class="attr">leancloud_visitors:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  app_id:</span> zieuxKa4IjAP6VgxxvBe4vkj-gzGzoHsz</div><div class="line"><span class="attr">  app_key:</span> MHGN54IEuofFNV1AROiRkEoG</div><div class="line"></div><div class="line"><span class="comment"># Show PV/UV of the website/page with busuanzi. 不蒜子网站访问量统计</span></div><div class="line"><span class="comment"># Get more information on http://ibruce.info/2015/04/04/busuanzi/</span></div><div class="line"><span class="comment">#busuanzi_count:</span></div><div class="line">  <span class="comment"># count values only if the other configs are false</span></div><div class="line"><span class="comment">#  enable: true</span></div><div class="line">  <span class="comment"># custom uv span for the whole site</span></div><div class="line"><span class="comment">#  site_uv: true</span></div><div class="line"><span class="comment">#  site_uv_header: 你是第</span></div><div class="line"><span class="comment">#  site_uv_footer: 个小伙伴</span></div><div class="line">  <span class="comment"># custom pv span for the whole site</span></div><div class="line"><span class="comment">#  site_pv: true</span></div><div class="line"><span class="comment">#  site_pv_header: 本站总浏览</span></div><div class="line"><span class="comment">#  site_pv_footer: 次</span></div><div class="line">  <span class="comment"># custom pv span for one page only</span></div><div class="line"><span class="comment">#  page_pv: true</span></div><div class="line"><span class="comment">#  page_pv_header: 热度</span></div><div class="line"><span class="comment">#  page_pv_footer: ℃</span></div><div class="line"></div><div class="line"><span class="comment"># Tencent analytics ID</span></div><div class="line"><span class="comment"># tencent_analytics:</span></div><div class="line"></div><div class="line"><span class="comment"># Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO</span></div><div class="line"><span class="attr">baidu_push:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment"># Google Calendar</span></div><div class="line"><span class="comment"># Share your recent schedule to others via calendar page</span></div><div class="line"><span class="comment">#</span></div><div class="line"><span class="comment"># API Documentation:</span></div><div class="line"><span class="comment"># https://developers.google.com/google-apps/calendar/v3/reference/events/list</span></div><div class="line"><span class="attr">calendar:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  calendar_id:</span> &lt;required<span class="string">&gt;</span></div><div class="line"><span class="attr">  api_key:</span> &lt;required<span class="string">&gt;</span></div><div class="line"><span class="attr">  orderBy:</span> startTime</div><div class="line"><span class="attr">  offsetMax:</span> <span class="number">24</span></div><div class="line"><span class="attr">  offsetMin:</span> <span class="number">4</span></div><div class="line"><span class="attr">  timeZone:</span></div><div class="line"><span class="attr">  showDeleted:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  singleEvents:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  maxResults:</span> <span class="number">250</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment">#! ---------------------------------------------------------------</span></div><div class="line"><span class="comment">#! DO NOT EDIT THE FOLLOWING SETTINGS</span></div><div class="line"><span class="comment">#! UNLESS YOU KNOW WHAT YOU ARE DOING</span></div><div class="line"><span class="comment">#! ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># Motion</span></div><div class="line"><span class="attr">use_motion:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment"># Fancybox</span></div><div class="line"><span class="attr">fancybox:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Script Vendors.</span></div><div class="line"><span class="comment"># Set a CDN address for the vendor you want to customize.</span></div><div class="line"><span class="comment"># For example</span></div><div class="line"><span class="comment">#    jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js</span></div><div class="line"><span class="comment"># Be aware that you should use the same version as internal ones to avoid potential problems.</span></div><div class="line"><span class="comment"># Please use the https protocol of CDN files when you enable https on your site.</span></div><div class="line"><span class="attr">vendors:</span></div><div class="line">  <span class="comment"># Internal path prefix. Please do not edit it. 5.0以下版本如果打开网页空白，就把vendors文件夹改名为lib,这里对应改。</span></div><div class="line"><span class="attr">  _internal:</span> lib</div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 2.1.3</span></div><div class="line"><span class="attr">  jquery:</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 2.1.5</span></div><div class="line">  <span class="comment"># See: http://fancyapps.com/fancybox/</span></div><div class="line"><span class="attr">  fancybox:</span></div><div class="line"><span class="attr">  fancybox_css:</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 1.0.6</span></div><div class="line">  <span class="comment"># See: https://github.com/ftlabs/fastclick</span></div><div class="line"><span class="attr">  fastclick:</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 1.9.7</span></div><div class="line">  <span class="comment"># See: https://github.com/tuupola/jquery_lazyload</span></div><div class="line"><span class="attr">  lazyload:</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 1.2.1</span></div><div class="line">  <span class="comment"># See: http://VelocityJS.org</span></div><div class="line"><span class="attr">  velocity:</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 1.2.1</span></div><div class="line">  <span class="comment"># See: http://VelocityJS.org</span></div><div class="line"><span class="attr">  velocity_ui:</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 0.7.9</span></div><div class="line">  <span class="comment"># See: https://faisalman.github.io/ua-parser-js/</span></div><div class="line"><span class="attr">  ua_parser:</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 4.4.0</span></div><div class="line">  <span class="comment"># See: http://fontawesome.io/</span></div><div class="line"><span class="attr">  fontawesome:</span></div><div class="line"></div><div class="line"><span class="comment"># 多说热评文章 true 或者 false</span></div><div class="line"><span class="attr">duoshuo_hotartical:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment"># Assets</span></div><div class="line"><span class="attr">css:</span> css</div><div class="line"><span class="attr">js:</span> js</div><div class="line"><span class="attr">images:</span> images</div><div class="line"></div><div class="line"><span class="comment"># Theme version</span></div><div class="line"><span class="attr">version:</span> <span class="number">5.1</span><span class="number">.0</span></div></pre></td></tr></table></figure></p>
<hr>
<h2 id="安装插件"><a href="#安装插件" class="headerlink" title="安装插件"></a>安装插件</h2><p>hexo支持插件，可以直接通过命令行安装即可：<code>npm install **plugin-name** --save</code><br>更新插件<br><code>npm update</code><br>卸载插件<br><code>npm uninstall **plugin-name**</code><br>下面推荐几个常用的插件：<br>feed插件:<code>npm install hexo-generator-feed --save</code><br>站点地图:<code>npm install hexo-generator-sitemap --save</code><br>百度站点地图:<code>npm install hexo-generator-baidu-sitemap --save</code></p>
<hr>
<h2 id="自由定制"><a href="#自由定制" class="headerlink" title="自由定制"></a>自由定制</h2><h3 id="文章字数、阅读时长统计"><a href="#文章字数、阅读时长统计" class="headerlink" title="文章字数、阅读时长统计"></a>文章字数、阅读时长统计</h3><p>修改<strong>post.swig</strong>模板<br><strong>模板位置</strong>：themes\next\layout\_macro\post.swig</p>
<p>安装hexo-wordcount插件<br><figure class="highlight sql"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm <span class="keyword">install</span> hexo-wordcount <span class="comment">--save</span></div></pre></td></tr></table></figure></p>
<p>通过以上安装后，你可以在你的模板文件后者.md文件加入以下相关的标签实现本插件的功能<br><strong>字数统计</strong>:WordCount<br><figure class="highlight django"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-count"</span>&gt;</span></span><span class="template-variable">&#123;&#123; wordcount(post.content) &#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></div></pre></td></tr></table></figure></p>
<p><strong>阅读时长预计</strong>:Min2Read<br><figure class="highlight django"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-count"</span>&gt;</span></span><span class="template-variable">&#123;&#123; min2read(post.content) &#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></div></pre></td></tr></table></figure></p>
<p><strong>总字数统计</strong>: TotalCount<br><figure class="highlight cs"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;span <span class="keyword">class</span>=<span class="string">"post-count"</span>&gt;&#123;&#123; totalcount(site, <span class="string">'0,0.0a'</span>) &#125;&#125;&lt;/span&gt;</div></pre></td></tr></table></figure></p>
<p>插入的代码以下：<br><figure class="highlight django"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div></pre></td><td class="code"><pre><div class="line"><span class="xml">          </span><span class="template-tag">&#123;% <span class="name"><span class="name">if</span></span> not is_index and theme.facebook_sdk.enable and theme.facebook_sdk.like_button %&#125;</span><span class="xml"></span></div><div class="line">            &amp;nbsp; | &amp;nbsp;</div><div class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"fb-like"</span> <span class="attr">data-layout</span>=<span class="string">"button_count"</span> <span class="attr">data-share</span>=<span class="string">"true"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">          <span class="template-tag">&#123;% <span class="name"><span class="name">endif</span></span> %&#125;</span><span class="xml"></span></div><div class="line"><span class="comment">&lt;!--从这里插入代码，上边是Facebook的代码--&gt;</span></div><div class="line"><span class="comment">&lt;!--leancloud文章阅读量统计（主题默认已经添加）参考：http://www.joryhe.com/2016-05-29-how_to_create_leancloud_read_Counter.html--&gt;</span></div><div class="line">          <span class="comment">&#123;# LeanCould PageView #&#125;</span><span class="xml"></span></div><div class="line">          <span class="template-tag">&#123;% <span class="name"><span class="name">if</span></span> theme.leancloud_visitors.enable %&#125;</span><span class="xml"></span></div><div class="line">             <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"</span></span><span class="template-variable">&#123;&#123; url_for(post.path) &#125;&#125;</span><span class="xml"><span class="tag"><span class="string">"</span> <span class="attr">class</span>=<span class="string">"leancloud_visitors"</span> <span class="attr">data-flag-title</span>=<span class="string">"</span></span></span><span class="template-variable">&#123;&#123; post.title &#125;&#125;</span><span class="xml"><span class="tag"><span class="string">"</span>&gt;</span></span></div><div class="line">               &amp;nbsp; | &amp;nbsp;</div><div class="line">               <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-meta-item-icon"</span>&gt;</span></div><div class="line">                 <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-eye"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></div><div class="line">               <span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">               <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-meta-item-text"</span>&gt;</span><span class="template-variable">&#123;&#123;__('post.visitors')&#125;&#125;</span><span class="xml"> <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></div><div class="line">               <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"leancloud-visitors-count"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">              <span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">          <span class="template-tag">&#123;% <span class="name"><span class="name">endif</span></span> %&#125;</span><span class="xml"></span></div><div class="line"><span class="comment">&lt;!--字数、阅读时长统计--&gt;</span></div><div class="line">         <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-time"</span>&gt;</span></div><div class="line">     &amp;nbsp; | &amp;nbsp;</div><div class="line">           <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-meta-item-icon"</span>&gt;</span></div><div class="line">             <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-calendar-o"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></div><div class="line">           <span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">           <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-meta-item-text"</span>&gt;</span>字数统计:<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">           <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-count"</span>&gt;</span><span class="template-variable">&#123;&#123; wordcount(post.content) &#125;&#125;</span><span class="xml">(字)<span class="tag">&lt;/<span class="name">span</span>&gt;</span>          </span></div><div class="line">         <span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line"></div><div class="line">		<span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-time"</span>&gt;</span></div><div class="line">	   &amp;nbsp; | &amp;nbsp;</div><div class="line">           <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-meta-item-icon"</span>&gt;</span></div><div class="line">             <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-calendar-o"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></div><div class="line">           <span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">           <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-meta-item-text"</span>&gt;</span>阅读时长:<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">           <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-count"</span>&gt;</span><span class="template-variable">&#123;&#123; min2read(post.content) &#125;&#125;</span><span class="xml">(分)<span class="tag">&lt;/<span class="name">span</span>&gt;</span>         </span></div><div class="line">         <span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line"><span class="comment">&lt;!--不蒜子网站访问量统计（主题默认已经添加），如果出现排班错位请忽略，下面用官网的方法实现--&gt;</span></div><div class="line">          <span class="template-tag">&#123;% <span class="name"><span class="name">if</span></span> not is_index and theme.busuanzi_count.enable and theme.busuanzi_count.page_pv %&#125;</span><span class="xml"></span></div><div class="line">              &amp;nbsp; | &amp;nbsp;</div><div class="line">              <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"page-pv"</span>&gt;</span><span class="template-variable">&#123;&#123; theme.busuanzi_count.page_pv_header &#125;&#125;</span><span class="xml"></span></div><div class="line">              <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"busuanzi-value"</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_page_pv"</span> &gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="template-variable">&#123;&#123; theme.busuanzi_count.page_pv_footer &#125;&#125;</span><span class="xml"></span></div><div class="line">              <span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">          <span class="template-tag">&#123;% <span class="name"><span class="name">endif</span></span> %&#125;</span><span class="xml"></span></div></pre></td></tr></table></figure></p>
<hr>
<h3 id="文章结语"><a href="#文章结语" class="headerlink" title="文章结语"></a>文章结语</h3><p>修改<strong>post.swig</strong>模板<br><strong>模板位置</strong>：themes\next\layout\_macro\post.swig</p>
<figure class="highlight django"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div></pre></td><td class="code"><pre><div class="line"><span class="xml">          </span><span class="template-tag">&#123;% <span class="name"><span class="name">if</span></span> post.type === 'picture' %&#125;</span><span class="xml"></span></div><div class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"</span></span><span class="template-variable">&#123;&#123; url_for(post.path) &#125;&#125;</span><span class="xml"><span class="tag"><span class="string">"</span>&gt;</span></span><span class="template-variable">&#123;&#123; post.content &#125;&#125;</span><span class="xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></div><div class="line">          <span class="template-tag">&#123;% <span class="name"><span class="name">else</span></span> %&#125;</span><span class="xml"></span></div><div class="line">            <span class="template-variable">&#123;&#123; post.content &#125;&#125;</span><span class="xml"></span></div><div class="line">          <span class="template-tag">&#123;% <span class="name"><span class="name">endif</span></span> %&#125;</span><span class="xml"></span></div><div class="line">        <span class="template-tag">&#123;% <span class="name"><span class="name">endif</span></span> %&#125;</span><span class="xml"></span></div><div class="line">      <span class="template-tag">&#123;% <span class="name"><span class="name">else</span></span> %&#125;</span><span class="xml"></span></div><div class="line">        <span class="template-variable">&#123;&#123; post.content &#125;&#125;</span><span class="xml"></span></div><div class="line"><span class="comment">&lt;!--这里是每篇文章的尾巴，从这里开始插入代码--&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">h2</span> <span class="attr">id</span>=<span class="string">"结语"</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#结语"</span> <span class="attr">class</span>=<span class="string">"headerlink"</span> <span class="attr">title</span>=<span class="string">"结语"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span>结语<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">blockquote</span>&gt;</span><span class="tag">&lt;<span class="name">p</span>&gt;</span>如果您觉得本博客还不错，欢迎继续关注本博客，欢迎多提宝贵意见，非常感谢！<span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">blockquote</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"text-align:center;color:#ccc;font-size:14px;"</span>&gt;</span>------本文结束<span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-paw"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span>感谢阅读------<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!--下面这部分左边有框，但位置不够就会排班错乱</span></div><div class="line">&lt;html&gt;</div><div class="line">  &lt;body&gt;</div><div class="line">    &lt;h1&gt;结语&lt;/h1&gt;</div><div class="line">      &lt;p&gt;&lt;h5&gt;&lt;a href="#" onclick="go_my_site()" rel="external"&gt;Leo Lan Blog Share For you!&lt;/a&gt;&lt;/h5&gt;&lt;/p&gt;</div><div class="line">      &lt;p&gt;如果您觉得本博客还不错，欢迎继续关注Leo Lan的博客，欢迎多提宝贵意见，非常感谢！&lt;/p&gt;</div><div class="line">  &lt;/body&gt;</div><div class="line">&lt;/html&gt;</div><div class="line"></div><div class="line">&lt;html&gt;</div><div class="line">  &lt;body&gt;</div><div class="line">    &lt;h2 id="结语"&gt;&lt;a href="#结语" class="headerlink" title="结语"&gt;&lt;/a&gt;结语&lt;/h2&gt;</div><div class="line">    &lt;blockquote&gt;&lt;p&gt;如果您觉得本博客还不错，欢迎收藏书签，欢迎多提宝贵意见，非常感谢！&lt;/p&gt;</div><div class="line">    &lt;footer&gt;&lt;strong&gt;Welcome to LeoLan'S BLOG&lt;/strong&gt;</div><div class="line">    &lt;cite&gt;&lt;a href="#" onclick="go_my_site()" rel="external"&gt;Leo Lan Blog Share For you!&lt;/a&gt;&lt;/cite&gt;&lt;/footer&gt;&lt;/blockquote&gt;&lt;/div&gt;</div><div class="line">  &lt;/body&gt;</div><div class="line">&lt;/html&gt;</div><div class="line">--&gt;</div></pre></td></tr></table></figure>
<hr>
<h3 id="文章底部的标签云锚点"><a href="#文章底部的标签云锚点" class="headerlink" title="文章底部的标签云锚点"></a>文章底部的标签云锚点</h3><p>修改<strong>post.swig</strong>模板<br><strong>模板位置</strong>：themes\next\layout\_macro\post.swig</p>
<figure class="highlight django"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="xml"><span class="comment">&lt;!--这是文章底部标签云锚点，不喜欢就注释掉</span></span></div><div class="line">    &lt;footer class="post-footer"&gt;</div><div class="line">      <span class="template-tag">&#123;% <span class="name"><span class="name">if</span></span> post.tags and post.tags.length and not is_index %&#125;</span><span class="xml"><span class="comment"></span></span></div><div class="line">        &lt;div class="post-tags"&gt;</div><div class="line">          <span class="template-tag">&#123;% <span class="name"><span class="name">for</span></span> tag <span class="keyword">in</span> post.tags %&#125;</span><span class="xml"><span class="comment"></span></span></div><div class="line">            &lt;a href="<span class="template-variable">&#123;&#123; url_for(tag.path) &#125;&#125;</span><span class="xml"><span class="comment">" rel="tag"&gt;# </span></span><span class="template-variable">&#123;&#123; tag.name &#125;&#125;</span><span class="xml"><span class="comment">&lt;/a&gt;</span></span></div><div class="line">          <span class="template-tag">&#123;% <span class="name"><span class="name">endfor</span></span> %&#125;</span><span class="xml"><span class="comment"></span></span></div><div class="line">        &lt;/div&gt;</div><div class="line">      <span class="template-tag">&#123;% <span class="name"><span class="name">endif</span></span> %&#125;</span><span class="xml"><span class="comment"></span></span></div><div class="line">--&gt;</div></pre></td></tr></table></figure>
<hr>
<h3 id="不蒜子网站访问量统计、删除NEXT主题自带尾巴"><a href="#不蒜子网站访问量统计、删除NEXT主题自带尾巴" class="headerlink" title="不蒜子网站访问量统计、删除NEXT主题自带尾巴"></a>不蒜子网站访问量统计、删除NEXT主题自带尾巴</h3><p>修改<strong>footer.swig</strong>模板<br><strong>模板位置</strong>：themes\next\layout\_partials\footer.swig<br>官网：<a href="http://service.ibruce.info" target="_blank" rel="external">http://service.ibruce.info</a><br><a href="http://ibruce.info/2015/04/04/busuanzi/" target="_blank" rel="external">http://ibruce.info/2015/04/04/busuanzi/</a><br>把代码改成这个样子，<code>busuanzi_value_site_uv</code>中，uv和pv功能是不一样的。<br><figure class="highlight django"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"powered-by"</span>&gt;</span></span></div><div class="line">  <span class="template-variable">&#123;&#123; __('footer.powered', '') &#125;&#125;</span><span class="xml"></span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"theme-info"</span>&gt;</span></div><div class="line">  <span class="template-variable">&#123;&#123; __('footer.theme') &#125;&#125;</span><span class="xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_site_uv"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span>位小伙伴</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">async</span> <span class="attr">src</span>=<span class="string">"//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure></p>
<p>同时更改语言文件中对应的名称<br>编辑：<strong>themes\languages\zh_Hans.yml</strong><br><figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">footer</span>:</div><div class="line">  powered: 本站总访问量&lt;<span class="selector-tag">span</span> id=<span class="string">"busuanzi_value_site_pv"</span>&gt;&lt;/span&gt;</div><div class="line">  theme: 您是第</div><div class="line">#&lt;<span class="selector-tag">a</span> target=<span class="string">"_blank"</span> href=<span class="string">"http://www.miitbeian.gov.cn/"</span>&gt;粤ICP备<span class="number">16026009</span>号-<span class="number">2</span>&lt;/a&gt;</div></pre></td></tr></table></figure></p>
<hr>
<h3 id="居中模块"><a href="#居中模块" class="headerlink" title="居中模块"></a>居中模块</h3><p>把要居中的模块、代码、文字、插件、外链等，放在下面代码的中间即可居中显示。<br><figure class="highlight django"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="xml"><span class="comment">&lt;!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 --&gt;</span></span></div><div class="line"><span class="comment">&lt;!-- 其中 class="blockquote-center" 是必须的 --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">blockquote</span> <span class="attr">class</span>=<span class="string">"blockquote-center"</span>&gt;</span>优秀的人，不是不合群，而是他们合群的人里面没有你<span class="tag">&lt;/<span class="name">blockquote</span>&gt;</span></div><div class="line">或者</div><div class="line">  <span class="comment">&lt;!-- 标签 方式，要求版本在0.4.5或以上 --&gt;</span></div><div class="line"><span class="template-tag">&#123;% <span class="name">centerquote</span> %&#125;</span><span class="xml">优秀的人，不是不合群，而是他们合群的人里面没有你</span><span class="template-tag">&#123;% <span class="name">endcenterquote</span> %&#125;</span><span class="xml"></span></div><div class="line">或者</div><div class="line">  <span class="comment">&lt;!-- 标签别名 --&gt;</span></div><div class="line"><span class="template-tag">&#123;% <span class="name">cq</span> %&#125;</span><span class="xml"> 优秀的人，不是不合群，而是他们合群的人里面没有你 </span><span class="template-tag">&#123;% <span class="name">endcq</span> %&#125;</span><span class="xml"></span></div></pre></td></tr></table></figure></p>
<hr>
<h3 id="留言板"><a href="#留言板" class="headerlink" title="留言板"></a>留言板</h3><p>编辑：<strong>themes\languages\zh_Hans.yml</strong><br><figure class="highlight dts"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="symbol">title:</span>   <span class="meta">#这里增加</span></div><div class="line"><span class="symbol">  guestbook:</span> 留言板</div><div class="line"><span class="symbol"></span></div><div class="line">menu:    <span class="meta">#这里增加</span></div><div class="line"><span class="symbol">  guestbook:</span> 给我留言</div></pre></td></tr></table></figure></p>
<p>在站点source目录下新建guestbook文件夹，里面新建index.md文件，内容如下(其中调用HTML代码，插入了一个播放器)：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">---</div><div class="line">title: 留言板</div><div class="line">date: <span class="number">2016</span><span class="number">-11</span><span class="number">-14</span> <span class="number">17</span>:<span class="number">21</span>:<span class="number">10</span></div><div class="line">---</div><div class="line"><span class="xml"><span class="tag">&lt;<span class="name">blockquote</span> <span class="attr">class</span>=<span class="string">"blockquote-center"</span>&gt;</span></span></div><div class="line"><span class="comment">&lt;!--网易云音乐的http地址，改为https，用https加载http资源会被屏蔽--&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>Stay Hungry,Stay Foolish<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></div><div class="line">   <span class="comment">&lt;!--&lt;embed src="https://music.163.com/style/swf/widget.swf?sid=34971711&amp;type=1&amp;auto=1&amp;width=310&amp;height=90" width="330" height="110"  allowNetworking="all"&gt;&lt;/embed&gt;</span></div><div class="line">   &lt;iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 src="https://music.163.com/outchain/player?type=1&amp;id=34971711&amp;auto=1&amp;height=90"&gt;&lt;/iframe&gt;--&gt;</div><div class="line">   <span class="tag">&lt;<span class="name">embed</span> <span class="attr">src</span>=<span class="string">"https://music.163.com/style/swf/widget.swf?sid=32507038&amp;type=2&amp;auto=1&amp;width=320&amp;height=66"</span> <span class="attr">width</span>=<span class="string">"340"</span> <span class="attr">height</span>=<span class="string">"86"</span>  <span class="attr">allowNetworking</span>=<span class="string">"all"</span>&gt;</span><span class="tag">&lt;/<span class="name">embed</span>&gt;</span></div><div class="line">   <span class="comment">&lt;!--这里是插入视频的方法</span></div><div class="line">	&lt;iframe src="//www.youtube.com/embed/JMl8cQjBfqk" width="560" height="315" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;--&gt;</div><div class="line"><span class="tag">&lt;/<span class="name">blockquote</span>&gt;</span></div><div class="line">&lt;br/&gt;</div><div class="line"><span class="xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"yu-2"</span>&gt;</span>最近访客<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></div><div class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"ds-recent-visitors"</span> data-num-items=<span class="string">"39"</span> data-avatar-size=<span class="string">"40"</span> id=<span class="string">"ds-recent-visitors"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></div><div class="line">&lt;br/&gt;</div></pre></td></tr></table></figure></p>
<p><strong>编辑主题配置文件</strong>：_config.yml<br><figure class="highlight dts"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="symbol">menu:</span>   <span class="meta">#在这里加上</span></div><div class="line"><span class="symbol">  guestbook:</span> /guestbook</div></pre></td></tr></table></figure></p>
<hr>
<h3 id="字体"><a href="#字体" class="headerlink" title="字体"></a>字体</h3><p>关于字体的修改开始时遇到很多问题，到后来才找到了原因，是因为引用的字体在<strong>www.google.com/fonts</strong>（默认是Google字体库）里找不到，或者是付费的字体。修改为免费的字体就正常使用了。打开<a href="www.google.com/fonts">Google Fonts</a>，右上角查找你要的字体，能搜索到的话把全名复制下来，填写在配置文件中。<br><img src="http://ofyfogrgx.bkt.clouddn.com/blog/20161206/152548232.png" alt="mark"></p>
<p>修改<strong>\themes\next_config.yml</strong>找到<strong>Font Settings</strong><br><figure class="highlight yaml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># Font Settings</span></div><div class="line"><span class="comment"># - Find fonts on Google Fonts (https://www.google.com/fonts)</span></div><div class="line"><span class="comment"># - All fonts set here will have the following styles:</span></div><div class="line"><span class="comment">#     light, light italic, normal, normal intalic, bold, bold italic</span></div><div class="line"><span class="comment"># - Be aware that setting too much fonts will cause site running slowly</span></div><div class="line"><span class="comment"># - Introduce in 5.0.1</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="attr">font:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"></div><div class="line">  <span class="comment"># Uri of fonts host. E.g. //fonts.googleapis.com (Default) </span></div><div class="line">  <span class="comment"># 外链字体库地址，例如 //fonts.googleapis.com (默认值)</span></div><div class="line">加载慢的话搜索fonts.googleapis.com即可找到替换地址,这里注意使用的地址中包含了下面设置的字体，没有的话是默认字体。</div><div class="line"><span class="attr">  host:</span> </div><div class="line">  <span class="comment">#fonts.css.network</span></div><div class="line"></div><div class="line">  <span class="comment"># Global font settings used on &lt;body&gt; element.</span></div><div class="line">  <span class="comment"># 全局字体，应用在 &lt;body&gt; 元素上</span></div><div class="line"><span class="attr">  global:</span></div><div class="line">    <span class="comment"># external: true will load this font family from host.</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span> Lato</div><div class="line">    <span class="comment">#Monda</span></div><div class="line"></div><div class="line">  <span class="comment"># Font settings for Headlines (h1, h2, h3, h4, h5, h6)</span></div><div class="line">  <span class="comment"># Fallback to `global` font settings.</span></div><div class="line">  <span class="comment"># 标题字体 (h1, h2, h3, h4, h5, h6)</span></div><div class="line"><span class="attr">  headings:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span> </div><div class="line"></div><div class="line">  <span class="comment"># Font settings for posts</span></div><div class="line">  <span class="comment"># Fallback to `global` font settings.</span></div><div class="line">  <span class="comment"># 文章字体</span></div><div class="line"><span class="attr">  posts:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span> Roboto</div><div class="line"></div><div class="line">  <span class="comment"># Font settings for Logo</span></div><div class="line">  <span class="comment"># Fallback to `global` font settings.</span></div><div class="line">  <span class="comment"># The `size` option use `px` as unit</span></div><div class="line">  <span class="comment"># Logo 字体</span></div><div class="line"><span class="attr">  logo:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span> Georgia</div><div class="line"><span class="attr">    size:</span> <span class="number">24</span></div><div class="line"></div><div class="line">  <span class="comment"># Font settings for &lt;code&gt; and code blocks.</span></div><div class="line"> <span class="comment"># 代码字体，应用于 &lt;code&gt; 以及代码块</span></div><div class="line"><span class="attr">  codes:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span> </div><div class="line"><span class="attr">    size:</span> <span class="number">14</span></div><div class="line"><span class="comment">#字体大小直接加个size: 写就行，单位是px，不填写则为默认大小。</span></div><div class="line"><span class="comment">#"Source Code Pro", "PT Mono", "DejaVu Sans Mono",</span></div></pre></td></tr></table></figure></p>
<p>参考：<br><a href="http://theme-next.iissnan.com/theme-settings.html#fonts-customization" target="_blank" rel="external">Next主题设置字体</a>  |  <a href="http://jingyan.baidu.com/article/09ea3ede0cb0e1c0aede39d8.html" target="_blank" rel="external">如何引用google字体</a></p>
<p>如果要在文章中临时引用特殊的字体格式，可以直接在 Markdown 文档中使用 html 语法<br><figure class="highlight xml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">font</span> <span class="attr">size</span>=<span class="string">4</span> &gt;</span> 这里输入文字，自定义大小 <span class="tag">&lt;/<span class="name">font</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">"#FF0000"</span>&gt;</span> 这里输入文字，自定义颜色的字体 <span class="tag">&lt;/<span class="name">font</span>&gt;</span></div></pre></td></tr></table></figure></p>
<hr>
<h3 id="404页面"><a href="#404页面" class="headerlink" title="404页面"></a>404页面</h3><p>404页面可以自己写，也可以引用腾讯公益404页面。<br>这是嵌入到主题中的404页面而不是新开一个页面；在站点目录source目录下新建<strong>404.html</strong>文件，粘贴以下代码：<br><figure class="highlight xml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE HTML&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">title</span>&gt;</span>404 - arao'blog<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"description"</span> <span class="attr">content</span>=<span class="string">"404错误，页面不存在！"</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"content-type"</span> <span class="attr">content</span>=<span class="string">"text/html;charset=utf-8;"</span>/&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge,chrome=1"</span> /&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"robots"</span> <span class="attr">content</span>=<span class="string">"all"</span> /&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"robots"</span> <span class="attr">content</span>=<span class="string">"index,follow"</span>/&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"http://qzonestyle.gtimg.cn/qzone_v6/lostchild/search_children.js"</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure></p>
<hr>
<h3 id="打赏"><a href="#打赏" class="headerlink" title="打赏"></a>打赏</h3><p>修改<strong>reward.swig</strong>模板<br><strong>模板位置</strong>：themes\next\layout\_macro\reward.swig</p>
<p>直接全部替换代码，这段代码是圆形的打赏按钮，二维码左右排列。<br><figure class="highlight django"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="xml"></span><span class="template-tag">&#123;% <span class="name"><span class="name">if</span></span> theme.alipay or theme.wechatpay %&#125;</span><span class="xml"></span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"padding: 10px 0; margin: 20px auto; width: 90%; text-align: center"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"margin-bottom: 10px;font-size: 16px;font-weight: 600;"</span>&gt;</span>您的支持将鼓励我继续创作,非常感谢！<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"rewardButton"</span>, <span class="attr">disable</span>=<span class="string">"enable"</span>, <span class="attr">onclick</span>=<span class="string">"var qr = document.getElementById('QR'); if (qr.style.display === 'none') &#123;qr.style.display='block';&#125; else &#123;qr.style.display='none'&#125;"</span>, <span class="attr">style</span>=<span class="string">"cursor: pointer; border: 0; outline: 0; border-radius: 100%; padding: 0; margin: 0; letter-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">onmouseover</span>=<span class="string">"this.style.color='rgb(236,96,0)';this.style.background='rgb(204,204,204)'"</span> <span class="attr">onMouseOut</span>=<span class="string">"this.style.color='#fff';this.style.background='rgb(236,96,0)'"</span> <span class="attr">style</span>=<span class="string">"display: inline-block; width: 70px; height: 70px; border-radius: 100%; line-height: 81px; color: #fff; font: 400 35px/75px 'microsofty'; background: rgb(236,96,0)"</span>&gt;</span>赏<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"QR"</span> <span class="attr">style</span>=<span class="string">"display: none;"</span>&gt;</span></div><div class="line">      <span class="template-tag">&#123;% <span class="name"><span class="name">if</span></span> theme.alipay %&#125;</span><span class="xml"></span></div><div class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"alipay"</span> <span class="attr">style</span>=<span class="string">"display: inline-block"</span>&gt;</span></div><div class="line">          <span class="tag">&lt;<span class="name">img</span> <span class="attr">id</span>=<span class="string">"alipay_qr"</span> <span class="attr">src</span>=<span class="string">"</span></span><span class="template-variable">&#123;&#123; theme.alipay &#125;&#125;</span><span class="xml"><span class="tag"><span class="string">"</span> <span class="attr">alt</span>=<span class="string">"</span></span></span><span class="template-variable">&#123;&#123; theme.author &#125;&#125;</span><span class="xml"><span class="tag"><span class="string"> Alipay"</span> <span class="attr">style</span>=<span class="string">"width: 200px; max-width: 100%; display: inline-block"</span>/&gt;</span></span></div><div class="line">          <span class="tag">&lt;<span class="name">p</span>&gt;</span>支付宝打赏<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">      <span class="template-tag">&#123;% <span class="name"><span class="name">endif</span></span> %&#125;</span><span class="xml"></span></div><div class="line">      <span class="template-tag">&#123;% <span class="name"><span class="name">if</span></span> theme.wechatpay %&#125;</span><span class="xml"></span></div><div class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"wechat"</span> <span class="attr">style</span>=<span class="string">"display: inline-block"</span>&gt;</span></div><div class="line">          <span class="tag">&lt;<span class="name">img</span> <span class="attr">id</span>=<span class="string">"wechat_qr"</span> <span class="attr">src</span>=<span class="string">"</span></span><span class="template-variable">&#123;&#123; theme.wechatpay &#125;&#125;</span><span class="xml"><span class="tag"><span class="string">"</span> <span class="attr">alt</span>=<span class="string">"</span></span></span><span class="template-variable">&#123;&#123; theme.author &#125;&#125;</span><span class="xml"><span class="tag"><span class="string"> WeChat Pay"</span> <span class="attr">style</span>=<span class="string">"width: 200px; max-width: 100%; display: inline-block"</span>/&gt;</span></span></div><div class="line">          <span class="tag">&lt;<span class="name">p</span>&gt;</span>微信打赏<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">      <span class="template-tag">&#123;% <span class="name"><span class="name">endif</span></span> %&#125;</span><span class="xml"></span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="template-tag">&#123;% <span class="name"><span class="name">endif</span></span> %&#125;</span><span class="xml"></span></div></pre></td></tr></table></figure></p>
<hr>
<h3 id="最近访客"><a href="#最近访客" class="headerlink" title="最近访客"></a>最近访客</h3><figure class="highlight applescript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;h3 <span class="built_in">id</span>=<span class="string">"最近访客"</span>&gt;&lt;a href=<span class="string">"#最近访客"</span> <span class="built_in">class</span>=<span class="string">"headerlink"</span> title=<span class="string">"最近访客"</span>&gt;&lt;/a&gt;最近访客&lt;/h3&gt;&lt;<span class="keyword">div</span> <span class="built_in">class</span>=<span class="string">"ds-recent-visitors"</span> data-num-items=<span class="string">"28"</span> data-avatar-size=<span class="string">"42"</span> <span class="built_in">id</span>=<span class="string">"ds-recent-visitors"</span>&gt;&lt;/<span class="keyword">div</span>&gt;</div></pre></td></tr></table></figure>
<figure class="highlight ini"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="attr">class</span>=“ds-recent-visitors”    //指定显示最近访客容器</div><div class="line"><span class="attr">data-num-items</span>=“<span class="number">28</span>”    //显示最近访客的数量</div><div class="line"><span class="attr">data-avatar-size</span>=“<span class="number">42</span>”    //显示最近访客头像尺寸大小</div><div class="line"><span class="attr">id</span>=“ds-recent-visitors”    //为了调节最近访客样式加的</div></pre></td></tr></table></figure>
<p>这样，每个页面都有最近访客了（只能看到注册了多说账户的用户）</p>
<hr>
<h3 id="SEO"><a href="#SEO" class="headerlink" title="SEO"></a>SEO</h3><h4 id="网站地图"><a href="#网站地图" class="headerlink" title="网站地图"></a>网站地图</h4><p>安装hexo的sitemap网站地图生成插件<br><figure class="highlight sql"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">npm <span class="keyword">install</span> hexo-generator-sitemap <span class="comment">--save</span></div><div class="line">npm <span class="keyword">install</span> hexo-generator-baidu-sitemap <span class="comment">--save</span></div></pre></td></tr></table></figure></p>
<p>在你的hexo站点的_config.yml添加下面的代码<br><figure class="highlight crmsh"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment"># hexo sitemap网站地图</span></div><div class="line">sitemap:</div><div class="line">path: sitemap.<span class="keyword">xml</span></div><div class="line"><span class="title">baidusitemap</span>:</div><div class="line">path: baidusitemap.<span class="keyword">xml</span>  <span class="title">#如果报path</span>错误就把前面增加baidu</div></pre></td></tr></table></figure></p>
<p>配置成功后，hexo编译时会在hexo站点根目录生成<strong>sitemap.xml</strong>和<strong>baidusitemap.xml</strong><br>其中sitemap.xml适合提交给谷歌搜素引擎，baidusitemap.xml适合提交百度搜索引擎。</p>
<hr>
<h4 id="蜘蛛协议"><a href="#蜘蛛协议" class="headerlink" title="蜘蛛协议"></a>蜘蛛协议</h4><p>在robots.txt中添加站点地图文件，如下（没有robots.txt就在站点目录source下新建）：<br><figure class="highlight dts"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="meta"># hexo robots.txt</span></div><div class="line">User-agent: *</div><div class="line"><span class="symbol">Allow:</span> /</div><div class="line"><span class="symbol">Allow:</span> <span class="meta-keyword">/archives/</span></div><div class="line"><span class="symbol"></span></div><div class="line">Disallow: <span class="meta-keyword">/lib/</span>   </div><div class="line"><span class="symbol">Disallow:</span> <span class="meta-keyword">/js/</span></div><div class="line"><span class="symbol">Disallow:</span> <span class="meta-keyword">/css/</span></div><div class="line"><span class="symbol">Disallow:</span> <span class="meta-keyword">/fonts/</span></div><div class="line"><span class="symbol">Disallow:</span> <span class="meta-keyword">/fancybox/</span></div><div class="line"><span class="symbol"></span></div><div class="line">Sitemap: http:<span class="comment">//www.leolan.top/sitemap.xml</span></div><div class="line"><span class="symbol">Sitemap:</span> http:<span class="comment">//www.leolan.top/baidusitemap.xml</span></div></pre></td></tr></table></figure></p>
<hr>
<h4 id="NexT主题，首页title的优化"><a href="#NexT主题，首页title的优化" class="headerlink" title="NexT主题，首页title的优化"></a>NexT主题，首页title的优化</h4><p>感谢<a href="http://www.arao.me/" target="_blank" rel="external">arao</a>的教程<br>修改\themes\next\layout\index.swig文件，将下面代码<br><figure class="highlight django"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="xml"></span><span class="template-tag">&#123;% <span class="name"><span class="name">block</span></span> title %&#125;</span><span class="xml"> </span><span class="template-variable">&#123;&#123; config.title &#125;&#125;</span><span class="xml"> </span><span class="template-tag">&#123;% <span class="name"><span class="name">endblock</span></span> %&#125;</span><span class="xml"></span></div></pre></td></tr></table></figure></p>
<p>改为<br><figure class="highlight django"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="xml"></span><span class="template-tag">&#123;% <span class="name"><span class="name">block</span></span> title %&#125;</span><span class="xml"> </span><span class="template-variable">&#123;&#123; config.title &#125;&#125;</span><span class="xml"> - </span><span class="template-variable">&#123;&#123; theme.description &#125;&#125;</span><span class="xml"> </span><span class="template-tag">&#123;% <span class="name"><span class="name">endblock</span></span> %&#125;</span><span class="xml"></span></div></pre></td></tr></table></figure></p>
<p>这时候你的首页标题会更符合<strong>网站名称 - 网站描述</strong>这习惯。<br>把关键词(在主题配置文件<strong>_config.yml</strong>中设置<strong>keywords:</strong>)也显示在Title标题里，可改成:<br><figure class="highlight django"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="xml"></span><span class="template-tag">&#123;% <span class="name"><span class="name">block</span></span> title %&#125;</span><span class="xml"> </span><span class="template-variable">&#123;&#123; theme.keywords &#125;&#125;</span><span class="xml"> - </span><span class="template-variable">&#123;&#123; config.title &#125;&#125;</span><span class="xml"> - </span><span class="template-variable">&#123;&#123; theme.description &#125;&#125;</span><span class="xml"> </span><span class="template-tag">&#123;% <span class="name"><span class="name">endblock</span></span> %&#125;</span><span class="xml"></span></div><div class="line">或（排列顺序看自己喜欢）</div><div class="line"><span class="template-tag">&#123;% <span class="name"><span class="name">block</span></span> title %&#125;</span><span class="xml"> </span><span class="template-variable">&#123;&#123; config.title &#125;&#125;</span><span class="xml"> - </span><span class="template-variable">&#123;&#123; theme.keywords &#125;&#125;</span><span class="xml"> </span><span class="template-tag">&#123;% <span class="name"><span class="name">endblock</span></span> %&#125;</span><span class="xml"></span></div></pre></td></tr></table></figure></p>
<p>注意：别堆砌关键字，整个标题一般不超过80个字符，可以通过chinaz的seo综合查询检查。</p>
<hr>
<h4 id="限制出站链接"><a href="#限制出站链接" class="headerlink" title="限制出站链接"></a>限制出站链接</h4><p>网络爬虫会在当前页面搜索所有的链接，故有可能跳到别的网站。<strong>nofollow</strong> 标签是由谷歌领头创新的一个 “反垃圾链接” 的标签，并被各大搜索引擎广泛支持，引用 <strong>nofollow</strong> 标签的目的是：用于指示搜索引擎不要追踪（即抓取）网页上的带有 <strong>nofollow</strong> 属性的任何出站链接，以减少垃圾链接的分散网站权重。<br><figure class="highlight sql"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm <span class="keyword">install</span> hexo-autonofollow <span class="comment">--save</span></div></pre></td></tr></table></figure></p>
<p>在 <strong>站点配置文件 </strong>中添加如下代码。<br><figure class="highlight yaml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="attr">nofollow:</span></div><div class="line"><span class="attr">    enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    exclude:</span> <span class="comment"># 例外的链接，可将友情链接放置此处</span></div><div class="line"><span class="bullet">    -</span> exclude1.com</div><div class="line"><span class="bullet">    -</span> exclude2.com</div></pre></td></tr></table></figure></p>
<hr>
<h4 id="文章链接唯一化"><a href="#文章链接唯一化" class="headerlink" title="文章链接唯一化"></a>文章链接唯一化</h4><p>也许你会数次更改文章题目或者变更文章发布时间，在默认设置下，文章链接都会改变，不利于搜索引擎收录，也不利于分享。唯一永久链接才是更好的选择。安装此插件后，不要在 <code>hexo s</code> 模式下更改文章文件名，否则文章将成空白,需要重新<code>hexo s</code>才行。<br><figure class="highlight sql"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm <span class="keyword">install</span> hexo-abbrlink <span class="comment">--save</span></div></pre></td></tr></table></figure></p>
<p>在 站点配置文件 中查找代码 <strong>permalink:</strong>，将其更改为:<br><figure class="highlight elixir"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="symbol">permalink:</span> posts/<span class="symbol">:abbrlink/</span>  <span class="comment"># “posts/” 可自行更换</span></div></pre></td></tr></table></figure></p>
<p>在 站点配置文件 中添加如下代码：<br><figure class="highlight x86asm"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"># abbrlink config</div><div class="line"><span class="symbol">abbrlink:</span></div><div class="line"><span class="symbol">  alg:</span> <span class="keyword">crc32</span>  # 算法：crc16(<span class="meta">default</span>) <span class="keyword">and</span> <span class="keyword">crc32</span> </div><div class="line"><span class="symbol">  rep:</span> hex    # 进制：<span class="keyword">dec</span>(<span class="meta">default</span>) <span class="keyword">and</span> hex</div></pre></td></tr></table></figure></p>
<p>永久链接有下面4种组合<br><figure class="highlight awk"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">crc16 &amp; hex</div><div class="line">https:<span class="regexp">//</span>post.zz173.com<span class="regexp">/posts/</span><span class="number">66</span>c8.html</div><div class="line"></div><div class="line">crc16 &amp; dec</div><div class="line">https:<span class="regexp">//</span>post.zz173.com<span class="regexp">/posts/</span><span class="number">65535</span>.html</div><div class="line"></div><div class="line">crc32 &amp; hex</div><div class="line">https:<span class="regexp">//</span>post.zz173.com<span class="regexp">/posts/</span><span class="number">8</span>ddf18fb.html</div><div class="line"></div><div class="line">crc32 &amp; dec</div><div class="line">https:<span class="regexp">//</span>post.zz173.com<span class="regexp">/posts/</span><span class="number">1690090958</span>.html</div></pre></td></tr></table></figure></p>
<hr>
<h4 id="百度网址推送"><a href="#百度网址推送" class="headerlink" title="百度网址推送"></a>百度网址推送</h4><p>修改<strong>baidu-push.swig</strong>模板<br><strong>模板位置</strong>：themes\next\layout\_scripts\baidu-push.swig<br>没有此文件就新建<br><figure class="highlight django"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="xml"></span><span class="template-tag">&#123;% <span class="name"><span class="name">if</span></span> theme.baidu_push %&#125;</span><span class="xml"></span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">var</span> bp = <span class="built_in">document</span>.createElement(<span class="string">'script'</span>);</div><div class="line">    <span class="keyword">var</span> curProtocol = <span class="built_in">window</span>.location.protocol.split(<span class="string">':'</span>)[<span class="number">0</span>];</div><div class="line">    <span class="keyword">if</span> (curProtocol === <span class="string">'https'</span>) &#123;</div><div class="line">        bp.src = <span class="string">'https://zz.bdstatic.com/linksubmit/push.js'</span>;        </div><div class="line">    &#125;</div><div class="line">    <span class="keyword">else</span> &#123;</div><div class="line">        bp.src = <span class="string">'http://push.zhanzhang.baidu.com/push.js'</span>;</div><div class="line">    &#125;</div><div class="line">    <span class="keyword">var</span> s = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"script"</span>)[<span class="number">0</span>];</div><div class="line">    s.parentNode.insertBefore(bp, s);</div><div class="line">&#125;)();</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="template-tag">&#123;% <span class="name"><span class="name">endif</span></span> %&#125;</span><span class="xml"></span></div></pre></td></tr></table></figure></p>
<p><strong>编辑站点配置文件</strong>：_config.yml<br>加上以下代码：<br><figure class="highlight dts"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="symbol">baidu_url_submit:</span>  <span class="meta">#百度链接推送，推送刚刚生成的永久链接</span></div><div class="line"><span class="symbol">  count:</span> <span class="number">5</span> <span class="meta">## 比如3，代表提交最新的三个链接</span></div><div class="line"><span class="symbol">  host:</span> www.leolan.top <span class="meta">## 在百度站长平台中注册的域名</span></div><div class="line"><span class="symbol">  token:</span> kZ5xboXBFPxQ0g7N <span class="meta">## 请注意这是您的秘钥， 请不要发布在公众仓库里!</span></div><div class="line"><span class="symbol">  path:</span> /baidu_urls.txt <span class="meta">## 文本文档的地址， 新链接会保存在此文本文档里</span></div></pre></td></tr></table></figure></p>
<hr>
<h4 id="主动推送新链接"><a href="#主动推送新链接" class="headerlink" title="主动推送新链接"></a>主动推送新链接</h4><p>解决百度爬虫被禁止访问的问题，提升网站收录质量和速度。<br><figure class="highlight sql"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm <span class="keyword">install</span> hexo-baidu-<span class="keyword">url</span>-submit <span class="comment">--save</span></div></pre></td></tr></table></figure></p>
<p>在 站点配置文件 中添加如下代码。<br><figure class="highlight dts"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="symbol">baidu_url_submit:</span></div><div class="line"><span class="symbol">  count:</span> <span class="number">5</span> <span class="meta">## 比如3，代表提交最新的三个链接</span></div><div class="line"><span class="symbol">  host:</span> blog.tangxiaozhu.com <span class="meta">## 在百度站长平台中注册的域名</span></div><div class="line"><span class="symbol">  token:</span>  <span class="meta">## 请注意这是您的秘钥， 请不要发布在公众仓库里!</span></div><div class="line"><span class="symbol">  path:</span> baidu_urls.txt <span class="meta">## 文本文档的地址， 新链接会保存在此文本文档里</span></div></pre></td></tr></table></figure></p>
<hr>
<h4 id="向百度提交所有链接"><a href="#向百度提交所有链接" class="headerlink" title="向百度提交所有链接"></a>向百度提交所有链接</h4><p>这是LoveNight的脚本，先本地安装Python。<br><figure class="highlight python"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div></pre></td><td class="code"><pre><div class="line"><span class="comment">#!/usr/bin/env python</span></div><div class="line"><span class="comment"># -*- coding: utf-8 -*-</span></div><div class="line"><span class="comment"># @Author: LoveNight</span></div><div class="line"><span class="comment"># @Date:   2015-11-16 20:45:59</span></div><div class="line"><span class="comment"># @Last Modified by:   lulee007</span></div><div class="line"><span class="comment"># @Last Modified time: 2016-01-16 21:06:50</span></div><div class="line"><span class="keyword">import</span> os</div><div class="line"><span class="keyword">import</span> sys</div><div class="line"><span class="keyword">import</span> json</div><div class="line"><span class="keyword">from</span> bs4 <span class="keyword">import</span> BeautifulSoup <span class="keyword">as</span> BS</div><div class="line"><span class="keyword">import</span> requests</div><div class="line"><span class="keyword">import</span> codecs</div><div class="line"></div><div class="line"><span class="string">"""</span></div><div class="line">hexo 博客专用，向百度站长平台提交所有网址</div><div class="line"></div><div class="line">本脚本必须放在 hexo 博客的根目录下执行！需要已安装生成百度站点地图的插件。</div><div class="line">百度站长平台提交链接：http://zhanzhang.baidu.com/linksubmit/index</div><div class="line">主动推送：最为快速的提交方式，推荐您将站点当天新产出链接立即通过此方式推送给百度，以保证新链接可以及时被百度收录。</div><div class="line">从中找到自己的接口调用地址</div><div class="line">"""</div><div class="line"></div><div class="line">url = <span class="string">'http://data.zz.baidu.com/urls?site=leolan.top&amp;token=kZ5xboXBFPxQ0g7N'</span>    <span class="comment">#这里是你的百度推送地址。</span></div><div class="line">baidu_sitemap = os.path.join(sys.path[<span class="number">0</span>], <span class="string">'public'</span>, <span class="string">'baidusitemap.xml'</span>)</div><div class="line">google_sitemap = os.path.join(sys.path[<span class="number">0</span>], <span class="string">'public'</span>, <span class="string">'baidusitemap_zhanwei.xml'</span>)</div><div class="line"><span class="comment"># sitemap = [baidu_sitemap, google_sitemap]</span></div><div class="line">sitemap = [baidu_sitemap]</div><div class="line"></div><div class="line"><span class="comment"># assert (os.path.exists(baidu_sitemap) or os.path.exists(</span></div><div class="line"><span class="comment">#     google_sitemap)), "没找到任何网站地图，请检查！"</span></div><div class="line"><span class="keyword">assert</span> os.path.exists(baidu_sitemap) , <span class="string">"没找到任何网站地图，请检查！"</span></div><div class="line"></div><div class="line"><span class="comment"># 从站点地图中读取网址列表</span></div><div class="line"><span class="function"><span class="keyword">def</span> <span class="title">getUrls</span><span class="params">()</span>:</span></div><div class="line">    urls = []</div><div class="line">    <span class="keyword">for</span> _ <span class="keyword">in</span> sitemap:</div><div class="line">        <span class="keyword">if</span> os.path.exists(_):</div><div class="line">            <span class="keyword">with</span> codecs.open(_, <span class="string">"r"</span>, <span class="string">"utf-8"</span>) <span class="keyword">as</span> f:</div><div class="line">                xml = f.read()</div><div class="line">            soup = BS(xml, <span class="string">"xml"</span>)</div><div class="line">            tags = soup.find_all(<span class="string">"loc"</span>)</div><div class="line">            urls += [x.string <span class="keyword">for</span> x <span class="keyword">in</span> tags]</div><div class="line">            <span class="keyword">if</span> _ == baidu_sitemap:</div><div class="line">                tags = soup.find_all(<span class="string">"breadCrumb"</span>, url=<span class="keyword">True</span>)</div><div class="line">                print(<span class="string">""</span>)</div><div class="line">                urls += [x[<span class="string">"url"</span>] <span class="keyword">for</span> x <span class="keyword">in</span> tags]</div><div class="line">    <span class="keyword">return</span> urls</div><div class="line"></div><div class="line"><span class="comment"># POST提交网址列表</span></div><div class="line"><span class="function"><span class="keyword">def</span> <span class="title">postUrls</span><span class="params">(urls)</span>:</span></div><div class="line">    urls = set(urls)  <span class="comment"># 先去重</span></div><div class="line">    print(<span class="string">"一共提取出 %s 个网址"</span> % len(urls))</div><div class="line">    data = <span class="string">"\n"</span>.join(urls)</div><div class="line">    <span class="keyword">return</span> requests.post(url, data=data).text</div><div class="line"></div><div class="line"><span class="keyword">if</span> __name__ == <span class="string">'__main__'</span>:</div><div class="line"></div><div class="line">    urls = getUrls()</div><div class="line">    result = postUrls(urls)</div><div class="line">    print(<span class="string">"提交结果："</span>)</div><div class="line">    print(result)</div></pre></td></tr></table></figure></p>
<hr>
<h3 id="语法优化"><a href="#语法优化" class="headerlink" title="语法优化"></a>语法优化</h3><p>默认的语法无法添加角标（footnotes）以注明引用，这种可来回跳转的引用还是挺有用处的。<br><figure class="highlight sql"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm <span class="keyword">install</span> hexo-footnotes <span class="comment">--save</span></div></pre></td></tr></table></figure></p>
<p>安装完毕请确认是否生效，如不生效，在 站点配置文件 中添加如下代码以手动启用：<br><figure class="highlight avrasm"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="symbol">plugins:</span></div><div class="line">  - hexo-footnotes</div></pre></td></tr></table></figure></p>
<p><img src="http://ofyfogrgx.bkt.clouddn.com/222054761.png" alt=""></p>
<hr>
<h3 id="页面留白-扩大显示范围"><a href="#页面留白-扩大显示范围" class="headerlink" title="页面留白(扩大显示范围)"></a>页面留白(扩大显示范围)</h3><p>浏览器留白太多，代码块看起来比较麻烦，想让更多空间显示文章。<br>NexT 对于内容的宽度的设定如下：<br>700px，当屏幕宽度 &lt; 1600px<br>900px，当屏幕宽度 &gt;= 1600px<br>移动设备下，宽度自适应</p>
<p>如果你需要修改内容的宽度，同样需要编辑样式文件。 编辑主题的 <strong>source/css/_variables/custom.styl</strong> 文件，新增变量：<br><figure class="highlight gams"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 修改成你期望的宽度，默认700px</span></div><div class="line"><span class="meta"><span class="meta-keyword">$content</span>-desktop = 700px</span></div><div class="line"><span class="comment">// 当视窗超过 1600px 后的宽度，默认900px</span></div><div class="line"><span class="meta"><span class="meta-keyword">$content</span>-desktop-large = 900px</span></div></pre></td></tr></table></figure></p>
<p>如果主题风格选择的是<strong>Pisces</strong>；那么同时还要修改<strong>header</strong> 的宽度、<strong>.main-inner </strong>的宽度以及 <strong>.content-wrap </strong>的宽度(如果没什么问题可以不修改custom.styl文件)。<br>编辑文件：<strong>source/css/_schemes/Picses/_layout.styl</strong><br><figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//可以使用百分比，也可以是像素，80%是比较合适的。</span></div><div class="line"><span class="comment">//开头header中修改为80%</span></div><div class="line">header&#123; <span class="attribute">width</span>: <span class="number">80%</span>; &#125;</div><div class="line"><span class="comment">//.container中系应该为80%</span></div><div class="line"><span class="selector-class">.main-inner</span> &#123; <span class="attribute">width</span>: <span class="number">80%</span>; &#125;</div><div class="line"><span class="comment">//最后修改.content-wrap</span></div><div class="line"><span class="selector-class">.content-wrap</span> &#123; <span class="attribute">width</span>: calc(<span class="number">100%</span> - <span class="number">260px</span>); &#125;</div></pre></td></tr></table></figure></p>
<hr>
<h3 id="多说评论框自定义css"><a href="#多说评论框自定义css" class="headerlink" title="多说评论框自定义css"></a>多说评论框自定义css</h3><p>感谢<a href="http://www.arao.me/" target="_blank" rel="external">arao</a>的代码<br>进入多说管理后台<br><img src="http://ofyfogrgx.bkt.clouddn.com/blog/20161115/170352768.png" alt="mark"><br>把下面代码粘贴进去保存<br><figure class="highlight scss"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div></pre></td><td class="code"><pre><div class="line"><span class="selector-id">#ds-reset</span> <span class="selector-class">.ds-avatar</span> <span class="selector-tag">img</span>,</div><div class="line"><span class="selector-id">#ds-recent-visitors</span> <span class="selector-class">.ds-avatar</span> <span class="selector-tag">img</span> &#123;</div><div class="line"><span class="attribute">width</span>: <span class="number">54px</span>;</div><div class="line"><span class="attribute">height</span>: <span class="number">54px</span>;     <span class="comment">/*设置图像的长和宽，这里要根据自己的评论框情况更改*/</span></div><div class="line"><span class="attribute">border-radius</span>: <span class="number">27px</span>;     <span class="comment">/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/</span></div><div class="line">-webkit-<span class="attribute">border-radius</span>: <span class="number">27px</span>;     <span class="comment">/*圆角效果：兼容webkit浏览器*/</span></div><div class="line">-moz-<span class="attribute">border-radius</span>: <span class="number">27px</span>;</div><div class="line"><span class="attribute">box-shadow</span>: inset <span class="number">0</span> -<span class="number">1px</span> <span class="number">0</span> <span class="number">#3333</span>sf;     <span class="comment">/*设置图像阴影效果*/</span></div><div class="line">-webkit-<span class="attribute">box-shadow</span>: inset <span class="number">0</span> -<span class="number">1px</span> <span class="number">0</span> <span class="number">#3333</span>sf;</div><div class="line">-webkit-<span class="attribute">transition</span>: <span class="number">0.4s</span>;</div><div class="line">-webkit-<span class="attribute">transition</span>: -webkit-transform <span class="number">0.4s</span> ease-out;</div><div class="line"><span class="attribute">transition</span>: transform <span class="number">0.4s</span> ease-out;     <span class="comment">/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读）*/</span></div><div class="line">-moz-<span class="attribute">transition</span>: -moz-transform <span class="number">0.4s</span> ease-out;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="selector-id">#ds-reset</span> <span class="selector-class">.ds-avatar</span> <span class="selector-tag">img</span>:hover,</div><div class="line"><span class="selector-id">#ds-recent-visitors</span> <span class="selector-class">.ds-avatar</span> <span class="selector-tag">img</span>:hover &#123;</div><div class="line"></div><div class="line"><span class="comment">/*设置鼠标悬浮在头像时的CSS样式*/</span>    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">10px</span> <span class="number">#fff</span>;</div><div class="line">rgba(255, 255, 255, <span class="selector-class">.6</span>), inset 0 0 20px rgba(255, 255, 255, 1);</div><div class="line">-webkit-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">10px</span> <span class="number">#fff</span>;</div><div class="line">rgba(255, 255, 255, <span class="selector-class">.6</span>), inset 0 0 20px rgba(255, 255, 255, 1);</div><div class="line"><span class="attribute">transform</span>: rotateZ(<span class="number">360deg</span>);     <span class="comment">/*图像旋转360度*/</span></div><div class="line">-webkit-<span class="attribute">transform</span>: rotateZ(<span class="number">360deg</span>);</div><div class="line">-moz-<span class="attribute">transform</span>: rotateZ(<span class="number">360deg</span>);</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="selector-id">#ds-thread</span> <span class="selector-id">#ds-reset</span> <span class="selector-class">.ds-textarea-wrapper</span> <span class="selector-tag">textarea</span> &#123;</div><div class="line"><span class="attribute">background</span>: url(http://ww4.sinaimg.cn/small/<span class="number">649</span>a4735gw1et7gnhy5fej20zk0m8q3q.jpg) right no-repeat;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="selector-id">#ds-recent-visitors</span> <span class="selector-class">.ds-avatar</span> &#123;</div><div class="line"><span class="attribute">float</span>: left</div><div class="line">&#125;</div><div class="line">/*隐藏多说底部版权*/</div><div class="line"><span class="number">#d</span>s-thread <span class="number">#d</span>s-reset .ds-powered-by &#123;</div><div class="line">display: none;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<hr>
<h3 id="解决多说评论不稳定、加载慢"><a href="#解决多说评论不稳定、加载慢" class="headerlink" title="解决多说评论不稳定、加载慢"></a>解决多说评论不稳定、加载慢</h3><p>把多说评论依赖的<strong>embed.js</strong>放置底部，修改<br>themes/next/layout/_scripts/third-party/comments/duoshuo.swig文件<br>将<br><figure class="highlight scheme"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">(<span class="name">document.getElementsByTagName</span>(<span class="symbol">'head</span>')[<span class="name">0</span>]</div></pre></td></tr></table></figure></p>
<p>修改为<br><figure class="highlight scheme"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">(<span class="name">document.getElementById</span>(<span class="symbol">'footer</span>')</div></pre></td></tr></table></figure></p>
<hr>
<h3 id="多说userid"><a href="#多说userid" class="headerlink" title="多说userid"></a>多说userid</h3><p>主题配置中需要用到user_id<br><img src="http://ofyfogrgx.bkt.clouddn.com/duoshuo_userid1.png" alt=""><br><img src="http://ofyfogrgx.bkt.clouddn.com/duoshuo_userid2.png" alt=""><br><figure class="highlight yaml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="attr">duoshuo_info:</span></div><div class="line"><span class="attr">  ua_enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  admin_enable:</span> ture</div><div class="line"><span class="attr">  user_id:</span> <span class="number">6343395544286626562</span></div><div class="line"><span class="attr">  admin_nickname:</span> 博主</div></pre></td></tr></table></figure></p>
<hr>
<h3 id="动态背景"><a href="#动态背景" class="headerlink" title="动态背景"></a>动态背景</h3><p>修改<strong>_layout.swig</strong>模板<br><strong>模板位置</strong>：themes\next\layout\_layout.swig<br>在末尾前加上下面一句<br><figure class="highlight xml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!-- 背景动画 --&gt;</span></div><div class="line">#默认灰色线条</div><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"/js/src/particle.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">#浅蓝色线条</div><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"/js/src/particle.js"</span> <span class="attr">count</span>=<span class="string">"50"</span> <span class="attr">zindex</span>=<span class="string">"-2"</span> <span class="attr">opacity</span>=<span class="string">"1"</span> <span class="attr">color</span>=<span class="string">"0,104,183"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure></p>
<p>在themes\source\js\src\下新建文件particle.js写上以下代码（也可以自己下载其他js,修改方式差不多）<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">!<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="function"><span class="keyword">function</span> <span class="title">n</span>(<span class="params">n,e,t</span>)</span>&#123;<span class="keyword">return</span> n.getAttribute(e)||t&#125;<span class="function"><span class="keyword">function</span> <span class="title">e</span>(<span class="params">n</span>)</span>&#123;<span class="keyword">return</span> <span class="built_in">document</span>.getElementsByTagName(n)&#125;<span class="function"><span class="keyword">function</span> <span class="title">t</span>(<span class="params"></span>)</span>&#123;<span class="keyword">var</span> t=e(<span class="string">"script"</span>),o=t.length,i=t[o<span class="number">-1</span>];<span class="keyword">return</span>&#123;<span class="attr">l</span>:o,<span class="attr">z</span>:n(i,<span class="string">"zIndex"</span>,<span class="number">-1</span>),<span class="attr">o</span>:n(i,<span class="string">"opacity"</span>,<span class="number">.5</span>),<span class="attr">c</span>:n(i,<span class="string">"color"</span>,<span class="string">"0,0,0"</span>),<span class="attr">n</span>:n(i,<span class="string">"count"</span>,<span class="number">99</span>)&#125;&#125;<span class="function"><span class="keyword">function</span> <span class="title">o</span>(<span class="params"></span>)</span>&#123;c=u.width=<span class="built_in">window</span>.innerWidth||<span class="built_in">document</span>.documentElement.clientWidth||<span class="built_in">document</span>.body.clientWidth,a=u.height=<span class="built_in">window</span>.innerHeight||<span class="built_in">document</span>.documentElement.clientHeight||<span class="built_in">document</span>.body.clientHeight&#125;<span class="function"><span class="keyword">function</span> <span class="title">i</span>(<span class="params"></span>)</span>&#123;l.clearRect(<span class="number">0</span>,<span class="number">0</span>,c,a);<span class="keyword">var</span> n,e,t,o,u,d,x=[w].concat(y);y.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">i</span>)</span>&#123;<span class="keyword">for</span>(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x&gt;c||i.x&lt;<span class="number">0</span>?<span class="number">-1</span>:<span class="number">1</span>,i.ya*=i.y&gt;a||i.y&lt;<span class="number">0</span>?<span class="number">-1</span>:<span class="number">1</span>,l.fillRect(i.x<span class="number">-.5</span>,i.y<span class="number">-.5</span>,<span class="number">1</span>,<span class="number">1</span>),e=<span class="number">0</span>;e&lt;x.length;e++)n=x[e],i!==n&amp;&amp;<span class="literal">null</span>!==n.x&amp;&amp;<span class="literal">null</span>!==n.y&amp;&amp;(o=i.x-n.x,u=i.y-n.y,d=o*o+u*u,d&lt;n.max&amp;&amp;(n===w&amp;&amp;d&gt;=n.max/<span class="number">2</span>&amp;&amp;(i.x-=<span class="number">.03</span>*o,i.y-=<span class="number">.03</span>*u),t=(n.max-d)/n.max,l.beginPath(),l.lineWidth=t/<span class="number">2</span>,l.strokeStyle=<span class="string">"rgba("</span>+m.c+<span class="string">","</span>+(t+<span class="number">.2</span>)+<span class="string">")"</span>,l.moveTo(i.x,i.y),l.lineTo(n.x,n.y),l.stroke()));x.splice(x.indexOf(i),<span class="number">1</span>)&#125;),r(i)&#125;<span class="keyword">var</span> c,a,u=<span class="built_in">document</span>.createElement(<span class="string">"canvas"</span>),m=t(),d=<span class="string">"c_n"</span>+m.l,l=u.getContext(<span class="string">"2d"</span>),r=<span class="built_in">window</span>.requestAnimationFrame||<span class="built_in">window</span>.webkitRequestAnimationFrame||<span class="built_in">window</span>.mozRequestAnimationFrame||<span class="built_in">window</span>.oRequestAnimationFrame||<span class="built_in">window</span>.msRequestAnimationFrame||<span class="function"><span class="keyword">function</span>(<span class="params">n</span>)</span>&#123;<span class="built_in">window</span>.setTimeout(n,<span class="number">1e3</span>/<span class="number">45</span>)&#125;,x=<span class="built_in">Math</span>.random,w=&#123;<span class="attr">x</span>:<span class="literal">null</span>,<span class="attr">y</span>:<span class="literal">null</span>,<span class="attr">max</span>:<span class="number">2e4</span>&#125;;u.id=d,u.style.cssText=<span class="string">"position:fixed;top:0;left:0;z-index:"</span>+m.z+<span class="string">";opacity:"</span>+m.o,e(<span class="string">"body"</span>)[<span class="number">0</span>].appendChild(u),o(),<span class="built_in">window</span>.onresize=o,<span class="built_in">window</span>.onmousemove=<span class="function"><span class="keyword">function</span>(<span class="params">n</span>)</span>&#123;n=n||<span class="built_in">window</span>.event,w.x=n.clientX,w.y=n.clientY&#125;,<span class="built_in">window</span>.onmouseout=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;w.x=<span class="literal">null</span>,w.y=<span class="literal">null</span>&#125;;<span class="keyword">for</span>(<span class="keyword">var</span> y=[],s=<span class="number">0</span>;m.n&gt;s;s++)&#123;<span class="keyword">var</span> f=x()*c,h=x()*a,g=<span class="number">2</span>*x()<span class="number">-1</span>,p=<span class="number">2</span>*x()<span class="number">-1</span>;y.push(&#123;<span class="attr">x</span>:f,<span class="attr">y</span>:h,<span class="attr">xa</span>:g,<span class="attr">ya</span>:p,<span class="attr">max</span>:<span class="number">6e3</span>&#125;)&#125;setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;i()&#125;,<span class="number">100</span>)&#125;();</div></pre></td></tr></table></figure></p>
<hr>
<h3 id="背景透明"><a href="#背景透明" class="headerlink" title="背景透明"></a>背景透明</h3><p>在 <strong>\themes\next\source\css\_custom\custom.styl</strong> 中写上 <code>.content-wrap {background: transparent;}</code><br><strong>custom.styl</strong>文件为用户自定义风格，卸载里面的内容会优先覆盖主题的设定，也可以定义其他的方法等。</p>
<hr>
<h3 id="背景放图片"><a href="#背景放图片" class="headerlink" title="背景放图片"></a>背景放图片</h3><p>首先找到一个背景图片放到 \themes\next\source\images下；<br>修改themes\next\source\css_schemes\Pisces（Mist和Muse也行）\index.styl文件，<br>在文件的最上方加上一代码<br><figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">body</span> &#123; <span class="attribute">background</span>:<span class="built_in">url</span>(/images/backGround.jpg);&#125;</div></pre></td></tr></table></figure></p>
<hr>
<h3 id="修改文章超链接样式"><a href="#修改文章超链接样式" class="headerlink" title="修改文章超链接样式"></a>修改文章超链接样式</h3><p>将链接文本设置为蓝色，鼠标划过时文字颜色加深，并显示下划线。<br>修改 <strong>themes\next\source\css\_custom\custom.styl </strong>，添加如下 <code>css</code> 样式（颜色可以自己更改，百度html颜色代码即可找到）：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">.post-body p a &#123;</div><div class="line">  color: #0593d3;</div><div class="line">  border-bottom: none;</div><div class="line">  &amp;:hover &#123;</div><div class="line">    color: #0477ab;</div><div class="line">    text-decoration: underline;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<hr>
<h3 id="High一下"><a href="#High一下" class="headerlink" title="High一下"></a>High一下</h3><h4 id="第一种"><a href="#第一种" class="headerlink" title="第一种"></a><strong>第一种</strong></h4><p><img src="http://ofyfogrgx.bkt.clouddn.com/blog/20161205/100022200.png" alt="mark"><br>修改<strong>header.swig</strong>模板<br><strong>模板位置</strong>：themes\next\layout\_partials\header.swig<br>在以下代码的结尾换行<br><figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">&#123;% if hasSearch %&#125;</div><div class="line">  &lt;li class="menu-item menu-item-search"&gt;</div><div class="line">    &#123;% if theme.swiftype_key %&#125;</div><div class="line">      &lt;a href="javascript:;" class="st-search-show-outputs"&gt;</div><div class="line">    &#123;% elseif config.search %&#125;</div><div class="line">      &lt;a href="javascript:;" class="popup-trigger"&gt;</div><div class="line">    &#123;% endif %&#125;</div><div class="line">      &#123;% if theme.menu_icons.enable %&#125;</div><div class="line">        &lt;i class="menu-item-icon fa fa-search fa-fw"&gt;&lt;/i&gt; &lt;br /&gt;</div><div class="line">      &#123;% endif %&#125;</div><div class="line">      &#123;&#123; __('menu.search') &#125;&#125;</div><div class="line">    &lt;/a&gt;</div><div class="line">  &lt;/li&gt;</div><div class="line">&#123;% endif %&#125;</div></pre></td></tr></table></figure></p>
<p>插入以下内容,感谢Neveryu修复了一些bug，以下是Neveryu的代码。<br><figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div><div class="line">121</div><div class="line">122</div><div class="line">123</div><div class="line">124</div><div class="line">125</div><div class="line">126</div><div class="line">127</div><div class="line">128</div><div class="line">129</div><div class="line">130</div><div class="line">131</div><div class="line">132</div><div class="line">133</div><div class="line">134</div><div class="line">135</div><div class="line">136</div><div class="line">137</div><div class="line">138</div><div class="line">139</div><div class="line">140</div><div class="line">141</div><div class="line">142</div><div class="line">143</div><div class="line">144</div><div class="line">145</div><div class="line">146</div><div class="line">147</div><div class="line">148</div><div class="line">149</div><div class="line">150</div><div class="line">151</div><div class="line">152</div><div class="line">153</div><div class="line">154</div><div class="line">155</div><div class="line">156</div><div class="line">157</div><div class="line">158</div><div class="line">159</div><div class="line">160</div><div class="line">161</div><div class="line">162</div><div class="line">163</div><div class="line">164</div><div class="line">165</div><div class="line">166</div><div class="line">167</div><div class="line">168</div><div class="line">169</div><div class="line">170</div><div class="line">171</div><div class="line">172</div><div class="line">173</div><div class="line">174</div><div class="line">175</div><div class="line">176</div><div class="line">177</div><div class="line">178</div><div class="line">179</div><div class="line">180</div><div class="line">181</div><div class="line">182</div><div class="line">183</div><div class="line">184</div><div class="line">185</div><div class="line">186</div><div class="line">187</div><div class="line">188</div><div class="line">189</div><div class="line">190</div><div class="line">191</div><div class="line">192</div><div class="line">193</div><div class="line">194</div><div class="line">195</div><div class="line">196</div><div class="line">197</div><div class="line">198</div><div class="line">199</div><div class="line">200</div><div class="line">201</div><div class="line">202</div><div class="line">203</div><div class="line">204</div><div class="line">205</div><div class="line">206</div><div class="line">207</div><div class="line">208</div><div class="line">209</div></pre></td><td class="code"><pre><div class="line">&lt;!-- 自定义High一下的功能 --&gt;</div><div class="line">     &lt;li class="menu-item"&gt; &lt;a title="把这个链接拖到你的工具栏中,任何网页都可以High" href='javascript:(</div><div class="line">   /*</div><div class="line">    * Copyright (C) 2016 Never_yu (Neveryu.github.io) &lt;React.dong.yu@gmail.com&gt;</div><div class="line">    * Sina Weibo (http://weibo.com/Neveryu)</div><div class="line">    *</div><div class="line">    * Licensed under the Apache License, Version 2.0 (the "License");</div><div class="line">    * you may not use this file except in compliance with the License.</div><div class="line">    * You may obtain a copy of the License at</div><div class="line">    *</div><div class="line">    *      http://www.apache.org/licenses/LICENSE-2.0</div><div class="line">    *</div><div class="line">    * Unless required by applicable law or agreed to in writing, software</div><div class="line">    * distributed under the License is distributed on an "AS IS" BASIS,</div><div class="line">    * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.</div><div class="line">    * See the License for the specific language governing permissions and</div><div class="line">    * limitations under the License.</div><div class="line">    */</div><div class="line">   function go() &#123;</div><div class="line"></div><div class="line"></div><div class="line">   var songs = [</div><div class="line">               "http://ofyfogrgx.bkt.clouddn.com/tongxingSibel%20-%20Im%20Sorry.mp3",</div><div class="line">               "http://ofyfogrgx.bkt.clouddn.com/Music-sunburst.mp3",</div><div class="line">               "http://ofyfogrgx.bkt.clouddn.com/blog/20161115/150103346.mp3",</div><div class="line">               "http://ofyfogrgx.bkt.clouddn.com/blog/20161115/150842689.mp3",</div><div class="line">               "http://ofyfogrgx.bkt.clouddn.com//blog/Apple%20&amp;%20Stone%20-%20Lost.mp3"</div><div class="line">   ];</div><div class="line"></div><div class="line">   </div><div class="line">   function c() &#123;</div><div class="line">       var e = document.createElement("link");</div><div class="line">       e.setAttribute("type", "text/css");</div><div class="line">       e.setAttribute("rel", "stylesheet");</div><div class="line">       e.setAttribute("href", f);</div><div class="line">       e.setAttribute("class", l);</div><div class="line">       document.body.appendChild(e)</div><div class="line">   &#125;</div><div class="line"></div><div class="line">   function h() &#123;</div><div class="line">       var e = document.getElementsByClassName(l);</div><div class="line">       for (var t = 0; t &lt; e.length; t++) &#123;</div><div class="line">           document.body.removeChild(e[t])</div><div class="line">       &#125;</div><div class="line">   &#125;</div><div class="line"></div><div class="line">   function p() &#123;</div><div class="line">       var e = document.createElement("div");</div><div class="line">       e.setAttribute("class", a);</div><div class="line">       document.body.appendChild(e);</div><div class="line">       setTimeout(function() &#123;</div><div class="line">           document.body.removeChild(e)</div><div class="line">       &#125;, 100)</div><div class="line">   &#125;</div><div class="line"></div><div class="line">   function d(e) &#123;</div><div class="line">       return &#123;</div><div class="line">           height : e.offsetHeight,</div><div class="line">           width : e.offsetWidth</div><div class="line">       &#125;</div><div class="line">   &#125;</div><div class="line"></div><div class="line">   function v(i) &#123;</div><div class="line">       var s = d(i);</div><div class="line">       return s.height &gt; e &amp;&amp; s.height &lt; n &amp;&amp; s.width &gt; t &amp;&amp; s.width &lt; r</div><div class="line">   &#125;</div><div class="line"></div><div class="line">   function m(e) &#123;</div><div class="line">       var t = e;</div><div class="line">       var n = 0;</div><div class="line">       while (!!t) &#123;</div><div class="line">           n += t.offsetTop;</div><div class="line">           t = t.offsetParent</div><div class="line">       &#125;</div><div class="line">       return n</div><div class="line">   &#125;</div><div class="line"></div><div class="line">   function g() &#123;</div><div class="line">       var e = document.documentElement;</div><div class="line">       if (!!window.innerWidth) &#123;</div><div class="line">           return window.innerHeight</div><div class="line">       &#125; else if (e &amp;&amp; !isNaN(e.clientHeight)) &#123;</div><div class="line">           return e.clientHeight</div><div class="line">       &#125;</div><div class="line">       return 0</div><div class="line">   &#125;</div><div class="line"></div><div class="line">   function y() &#123;</div><div class="line">       if (window.pageYOffset) &#123;</div><div class="line">           return window.pageYOffset</div><div class="line">       &#125;</div><div class="line">       return Math.max(document.documentElement.scrollTop, document.body.scrollTop)</div><div class="line">   &#125;</div><div class="line"></div><div class="line">   function E(e) &#123;</div><div class="line">       var t = m(e);</div><div class="line">       return t &gt;= w &amp;&amp; t &lt;= b + w</div><div class="line">   &#125;</div><div class="line"></div><div class="line">   function S() &#123;</div><div class="line">       var e = document.getElementById("audio_element_id");</div><div class="line">       if(e != null)&#123;</div><div class="line">           var index = parseInt(e.getAttribute("curSongIndex"));</div><div class="line">           if(index &gt; songs.length - 2) &#123;</div><div class="line">               index = 0;</div><div class="line">           &#125; else &#123;</div><div class="line">               index++;</div><div class="line">           &#125;</div><div class="line">           e.setAttribute("curSongIndex", index);</div><div class="line">           N();</div><div class="line">       &#125;</div><div class="line"></div><div class="line">       e.src = i;</div><div class="line">       e.play()</div><div class="line">   &#125;</div><div class="line"></div><div class="line">   function x(e) &#123;</div><div class="line">       e.className += " " + s + " " + o</div><div class="line">   &#125;</div><div class="line"></div><div class="line">   function T(e) &#123;</div><div class="line">       e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]</div><div class="line">   &#125;</div><div class="line"></div><div class="line">   function N() &#123;</div><div class="line">       var e = document.getElementsByClassName(s);</div><div class="line">       var t = new RegExp("\\b" + s + "\\b");</div><div class="line">       for (var n = 0; n &lt; e.length; ) &#123;</div><div class="line">           e[n].className = e[n].className.replace(t, "")</div><div class="line">       &#125;</div><div class="line">   &#125;</div><div class="line"></div><div class="line">   function initAudioEle() &#123;</div><div class="line">       var e = document.getElementById("audio_element_id");</div><div class="line">       if(e === null)&#123;</div><div class="line">           e = document.createElement("audio");</div><div class="line">           e.setAttribute("class", l);</div><div class="line">           e.setAttribute("curSongIndex", 0);</div><div class="line">           e.id = "audio_element_id";</div><div class="line">           e.loop = false;</div><div class="line">           e.bgcolor = 0;</div><div class="line">           e.addEventListener("canplay", function() &#123;</div><div class="line">           setTimeout(function() &#123;</div><div class="line">               x(k)</div><div class="line">           &#125;, 500);</div><div class="line">           setTimeout(function() &#123;</div><div class="line">               N();</div><div class="line">               p();</div><div class="line">               for (var e = 0; e &lt; O.length; e++) &#123;</div><div class="line">                   T(O[e])</div><div class="line">               &#125;</div><div class="line">           &#125;, 15500)</div><div class="line">       &#125;, true);</div><div class="line">       e.addEventListener("ended", function() &#123;</div><div class="line">           N();</div><div class="line">           h();</div><div class="line">           go();</div><div class="line">       &#125;, true);</div><div class="line">       e.innerHTML = " &lt;p&gt;If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.&lt;/p&gt; &lt;p&gt;";</div><div class="line">       document.body.appendChild(e);</div><div class="line">       &#125;</div><div class="line">   &#125;</div><div class="line">   </div><div class="line">   initAudioEle();</div><div class="line">   var e = 30;</div><div class="line">   var t = 30;</div><div class="line">   var n = 350;</div><div class="line">   var r = 350;</div><div class="line"></div><div class="line">   var curSongIndex = parseInt(document.getElementById("audio_element_id").getAttribute("curSongIndex"));</div><div class="line">   var i = songs[curSongIndex];</div><div class="line">   </div><div class="line">   var s = "mw-harlem_shake_me";</div><div class="line">   var o = "im_first";</div><div class="line">   var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];</div><div class="line">   var a = "mw-strobe_light";</div><div class="line"></div><div class="line">   /* harlem-shake-style.css，替换成你的位置，也可以直接使用：//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css */</div><div class="line">   var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";</div><div class="line">   </div><div class="line">   var l = "mw_added_css";</div><div class="line">   var b = g();</div><div class="line">   var w = y();</div><div class="line">   var C = document.getElementsByTagName("*");</div><div class="line">   var k = null;</div><div class="line">   for (var L = 0; L &lt; C.length; L++) &#123;</div><div class="line">       var A = C[L];</div><div class="line">       if (v(A)) &#123;</div><div class="line">           if (E(A)) &#123;</div><div class="line">               k = A;</div><div class="line">               break</div><div class="line">           &#125;</div><div class="line">       &#125;</div><div class="line">   &#125;</div><div class="line">   if (A === null) &#123;</div><div class="line">       console.warn("Could not find a node of the right size. Please try a different page.");</div><div class="line">       return</div><div class="line">   &#125;</div><div class="line">   c();</div><div class="line">   S();</div><div class="line">   var O = [];</div><div class="line">   for (var L = 0; L &lt; C.length; L++) &#123;</div><div class="line">       var A = C[L];</div><div class="line">       if (v(A)) &#123;</div><div class="line">           O.push(A)</div><div class="line">       &#125;</div><div class="line">   &#125;</div><div class="line">   &#125;)()'&gt;&lt;i class="menu-item-icon fa fa-music fa-fw"&gt;&lt;/i&gt;High一下&lt;/a&gt; &lt;/li&gt;</div><div class="line">         &lt;!-- end High一下 --&gt;</div></pre></td></tr></table></figure></p>
<hr>
<h4 id="第二种"><a href="#第二种" class="headerlink" title="第二种"></a><strong>第二种</strong></h4><p><img src="http://ofyfogrgx.bkt.clouddn.com/blog/20161205/111721588.png" alt="mark"></p>
<p>不修改<strong>themes\next\layout\_partials\header.swig</strong>文件<br>而是修改<strong>themes\next\layout\_macro\sidebar.swig</strong><br><figure class="highlight verilog"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div><div class="line">121</div><div class="line">122</div><div class="line">123</div><div class="line">124</div><div class="line">125</div><div class="line">126</div><div class="line">127</div><div class="line">128</div><div class="line">129</div><div class="line">130</div><div class="line">131</div><div class="line">132</div><div class="line">133</div><div class="line">134</div><div class="line">135</div><div class="line">136</div><div class="line">137</div><div class="line">138</div><div class="line">139</div><div class="line">140</div><div class="line">141</div><div class="line">142</div><div class="line">143</div><div class="line">144</div><div class="line">145</div><div class="line">146</div><div class="line">147</div><div class="line">148</div><div class="line">149</div><div class="line">150</div><div class="line">151</div><div class="line">152</div><div class="line">153</div><div class="line">154</div><div class="line">155</div><div class="line">156</div><div class="line">157</div><div class="line">158</div><div class="line">159</div><div class="line">160</div><div class="line">161</div><div class="line">162</div><div class="line">163</div><div class="line">164</div><div class="line">165</div><div class="line">166</div><div class="line">167</div><div class="line">168</div><div class="line">169</div><div class="line">170</div><div class="line">171</div><div class="line">172</div><div class="line">173</div><div class="line">174</div><div class="line">175</div><div class="line">176</div><div class="line">177</div><div class="line">178</div><div class="line">179</div><div class="line">180</div><div class="line">181</div><div class="line">182</div><div class="line">183</div></pre></td><td class="code"><pre><div class="line">        &#123;% <span class="keyword">if</span> theme<span class="variable">.rss</span> %&#125;</div><div class="line">          &lt;div <span class="keyword">class</span>=<span class="string">"feed-link motion-element"</span>&gt;</div><div class="line">            &lt;a href=<span class="string">"&#123;&#123; url_for(theme.rss) &#125;&#125;"</span> rel=<span class="string">"alternate"</span>&gt;</div><div class="line">              &lt;i <span class="keyword">class</span>=<span class="string">"fa fa-rss"</span>&gt;&lt;/i&gt;</div><div class="line">              RSS</div><div class="line">            &lt;/a&gt;</div><div class="line">&lt;!-- 在RSS的div内加入，引用相同的样式 --&gt;</div><div class="line">&lt;!-- 自定义High一下的功能 --&gt;</div><div class="line">&lt;a href='javascript:(</div><div class="line">   <span class="keyword">function</span> go() &#123;</div><div class="line">   <span class="keyword">var</span> songs = [</div><div class="line">               <span class="string">"http://ofyfogrgx.bkt.clouddn.com/tongxingSibel%20-%20Im%20Sorry.mp3"</span>,</div><div class="line">               <span class="string">"http://ofyfogrgx.bkt.clouddn.com/Music-sunburst.mp3"</span>,</div><div class="line">               <span class="string">"http://ofyfogrgx.bkt.clouddn.com/blog/20161115/150103346.mp3"</span>,</div><div class="line">               <span class="string">"http://ofyfogrgx.bkt.clouddn.com/blog/20161115/150842689.mp3"</span>,</div><div class="line">               <span class="string">"http://ofyfogrgx.bkt.clouddn.com//blog/Apple%20&amp;%20Stone%20-%20Lost.mp3"</span></div><div class="line">   ];</div><div class="line">   </div><div class="line">   <span class="keyword">function</span> c() &#123;</div><div class="line">       <span class="keyword">var</span> e = document<span class="variable">.createElement</span>(<span class="string">"link"</span>);</div><div class="line">       e<span class="variable">.setAttribute</span>(<span class="string">"type"</span>, <span class="string">"text/css"</span>);</div><div class="line">       e<span class="variable">.setAttribute</span>(<span class="string">"rel"</span>, <span class="string">"stylesheet"</span>);</div><div class="line">       e<span class="variable">.setAttribute</span>(<span class="string">"href"</span>, f);</div><div class="line">       e<span class="variable">.setAttribute</span>(<span class="string">"class"</span>, l);</div><div class="line">       document<span class="variable">.body</span><span class="variable">.appendChild</span>(e)</div><div class="line">   &#125;</div><div class="line">   <span class="keyword">function</span> h() &#123;</div><div class="line">       <span class="keyword">var</span> e = document<span class="variable">.getElementsByClassName</span>(l);</div><div class="line">       <span class="keyword">for</span> (<span class="keyword">var</span> t = <span class="number">0</span>; t &lt; e<span class="variable">.length</span>; t++) &#123;</div><div class="line">           document<span class="variable">.body</span><span class="variable">.removeChild</span>(e[t])</div><div class="line">       &#125;</div><div class="line">   &#125;</div><div class="line">   <span class="keyword">function</span> p() &#123;</div><div class="line">       <span class="keyword">var</span> e = document<span class="variable">.createElement</span>(<span class="string">"div"</span>);</div><div class="line">       e<span class="variable">.setAttribute</span>(<span class="string">"class"</span>, a);</div><div class="line">       document<span class="variable">.body</span><span class="variable">.appendChild</span>(e);</div><div class="line">       setTimeout(<span class="keyword">function</span>() &#123;</div><div class="line">           document<span class="variable">.body</span><span class="variable">.removeChild</span>(e)</div><div class="line">       &#125;, <span class="number">100</span>)</div><div class="line">   &#125;</div><div class="line">   <span class="keyword">function</span> d(e) &#123;</div><div class="line">       <span class="keyword">return</span> &#123;</div><div class="line">           height : e<span class="variable">.offsetHeight</span>,</div><div class="line">           width : e<span class="variable">.offsetWidth</span></div><div class="line">       &#125;</div><div class="line">   &#125;</div><div class="line">   <span class="keyword">function</span> v(i) &#123;</div><div class="line">       <span class="keyword">var</span> s = d(i);</div><div class="line">       <span class="keyword">return</span> s<span class="variable">.height</span> &gt; e &amp;&amp; s<span class="variable">.height</span> &lt; n &amp;&amp; s<span class="variable">.width</span> &gt; t &amp;&amp; s<span class="variable">.width</span> &lt; r</div><div class="line">   &#125;</div><div class="line">   <span class="keyword">function</span> m(e) &#123;</div><div class="line">       <span class="keyword">var</span> t = e;</div><div class="line">       <span class="keyword">var</span> n = <span class="number">0</span>;</div><div class="line">       <span class="keyword">while</span> (!!t) &#123;</div><div class="line">           n += t<span class="variable">.offsetTop</span>;</div><div class="line">           t = t<span class="variable">.offsetParent</span></div><div class="line">       &#125;</div><div class="line">       <span class="keyword">return</span> n</div><div class="line">   &#125;</div><div class="line">   <span class="keyword">function</span> g() &#123;</div><div class="line">       <span class="keyword">var</span> e = document<span class="variable">.documentElement</span>;</div><div class="line">       <span class="keyword">if</span> (!!window<span class="variable">.innerWidth</span>) &#123;</div><div class="line">           <span class="keyword">return</span> window<span class="variable">.innerHeight</span></div><div class="line">       &#125; <span class="keyword">else</span> <span class="keyword">if</span> (e &amp;&amp; !isNaN(e<span class="variable">.clientHeight</span>)) &#123;</div><div class="line">           <span class="keyword">return</span> e<span class="variable">.clientHeight</span></div><div class="line">       &#125;</div><div class="line">       <span class="keyword">return</span> <span class="number">0</span></div><div class="line">   &#125;</div><div class="line">   <span class="keyword">function</span> y() &#123;</div><div class="line">       <span class="keyword">if</span> (window<span class="variable">.pageYOffset</span>) &#123;</div><div class="line">           <span class="keyword">return</span> window<span class="variable">.pageYOffset</span></div><div class="line">       &#125;</div><div class="line">       <span class="keyword">return</span> Math<span class="variable">.max</span>(document<span class="variable">.documentElement</span><span class="variable">.scrollTop</span>, document<span class="variable">.body</span><span class="variable">.scrollTop</span>)</div><div class="line">   &#125;</div><div class="line">   <span class="keyword">function</span> E(e) &#123;</div><div class="line">       <span class="keyword">var</span> t = m(e);</div><div class="line">       <span class="keyword">return</span> t &gt;= w &amp;&amp; t &lt;= b + w</div><div class="line">   &#125;</div><div class="line">   <span class="keyword">function</span> S() &#123;</div><div class="line">       <span class="keyword">var</span> e = document<span class="variable">.getElementById</span>(<span class="string">"audio_element_id"</span>);</div><div class="line">       <span class="keyword">if</span>(e != <span class="literal">null</span>)&#123;</div><div class="line">           <span class="keyword">var</span> index = parseInt(e<span class="variable">.getAttribute</span>(<span class="string">"curSongIndex"</span>));</div><div class="line">           <span class="keyword">if</span>(index &gt; songs<span class="variable">.length</span> - <span class="number">2</span>) &#123;</div><div class="line">               index = <span class="number">0</span>;</div><div class="line">           &#125; <span class="keyword">else</span> &#123;</div><div class="line">               index++;</div><div class="line">           &#125;</div><div class="line">           e<span class="variable">.setAttribute</span>(<span class="string">"curSongIndex"</span>, index);</div><div class="line">           N();</div><div class="line">       &#125;</div><div class="line">       e<span class="variable">.src</span> = i;</div><div class="line">       e<span class="variable">.play</span>()</div><div class="line">   &#125;</div><div class="line">   <span class="keyword">function</span> x(e) &#123;</div><div class="line">       e<span class="variable">.className</span> += <span class="string">" "</span> + s + <span class="string">" "</span> + o</div><div class="line">   &#125;</div><div class="line">   <span class="keyword">function</span> T(e) &#123;</div><div class="line">       e<span class="variable">.className</span> += <span class="string">" "</span> + s + <span class="string">" "</span> + u[Math<span class="variable">.floor</span>(Math<span class="variable">.random</span>() * u<span class="variable">.length</span>)]</div><div class="line">   &#125;</div><div class="line">   <span class="keyword">function</span> N() &#123;</div><div class="line">       <span class="keyword">var</span> e = document<span class="variable">.getElementsByClassName</span>(s);</div><div class="line">       <span class="keyword">var</span> t = <span class="keyword">new</span> RegExp(<span class="string">"\\b"</span> + s + <span class="string">"\\b"</span>);</div><div class="line">       <span class="keyword">for</span> (<span class="keyword">var</span> n = <span class="number">0</span>; n &lt; e<span class="variable">.length</span>; ) &#123;</div><div class="line">           e[n]<span class="variable">.className</span> = e[n]<span class="variable">.className</span><span class="variable">.replace</span>(t, <span class="string">""</span>)</div><div class="line">       &#125;</div><div class="line">   &#125;</div><div class="line">   <span class="keyword">function</span> initAudioEle() &#123;</div><div class="line">       <span class="keyword">var</span> e = document<span class="variable">.getElementById</span>(<span class="string">"audio_element_id"</span>);</div><div class="line">       <span class="keyword">if</span>(e === <span class="literal">null</span>)&#123;</div><div class="line">           e = document<span class="variable">.createElement</span>(<span class="string">"audio"</span>);</div><div class="line">           e<span class="variable">.setAttribute</span>(<span class="string">"class"</span>, l);</div><div class="line">           e<span class="variable">.setAttribute</span>(<span class="string">"curSongIndex"</span>, <span class="number">0</span>);</div><div class="line">           e<span class="variable">.id</span> = <span class="string">"audio_element_id"</span>;</div><div class="line">           e<span class="variable">.loop</span> = false;</div><div class="line">           e<span class="variable">.bgcolor</span> = <span class="number">0</span>;</div><div class="line">           e<span class="variable">.addEventListener</span>(<span class="string">"canplay"</span>, <span class="keyword">function</span>() &#123;</div><div class="line">           setTimeout(<span class="keyword">function</span>() &#123;</div><div class="line">               x(k)</div><div class="line">           &#125;, <span class="number">500</span>);</div><div class="line">           setTimeout(<span class="keyword">function</span>() &#123;</div><div class="line">               N();</div><div class="line">               p();</div><div class="line">               <span class="keyword">for</span> (<span class="keyword">var</span> e = <span class="number">0</span>; e &lt; O<span class="variable">.length</span>; e++) &#123;</div><div class="line">                   T(O[e])</div><div class="line">               &#125;</div><div class="line">           &#125;, <span class="number">15500</span>)</div><div class="line">       &#125;, true);</div><div class="line">       e<span class="variable">.addEventListener</span>(<span class="string">"ended"</span>, <span class="keyword">function</span>() &#123;</div><div class="line">           N();</div><div class="line">           h();</div><div class="line">           go();</div><div class="line">       &#125;, true);</div><div class="line">       e<span class="variable">.innerHTML</span> = <span class="string">" &lt;p&gt;If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.&lt;/p&gt; &lt;p&gt;"</span>;</div><div class="line">       document<span class="variable">.body</span><span class="variable">.appendChild</span>(e);</div><div class="line">       &#125;</div><div class="line">   &#125;</div><div class="line">   </div><div class="line">   initAudioEle();</div><div class="line">   <span class="keyword">var</span> e = <span class="number">30</span>;</div><div class="line">   <span class="keyword">var</span> t = <span class="number">30</span>;</div><div class="line">   <span class="keyword">var</span> n = <span class="number">350</span>;</div><div class="line">   <span class="keyword">var</span> r = <span class="number">350</span>;</div><div class="line">   <span class="keyword">var</span> curSongIndex = parseInt(document<span class="variable">.getElementById</span>(<span class="string">"audio_element_id"</span>)<span class="variable">.getAttribute</span>(<span class="string">"curSongIndex"</span>));</div><div class="line">   <span class="keyword">var</span> i = songs[curSongIndex];</div><div class="line">   </div><div class="line">   <span class="keyword">var</span> s = <span class="string">"mw-harlem_shake_me"</span>;</div><div class="line">   <span class="keyword">var</span> o = <span class="string">"im_first"</span>;</div><div class="line">   <span class="keyword">var</span> u = [<span class="string">"im_drunk"</span>, <span class="string">"im_baked"</span>, <span class="string">"im_trippin"</span>, <span class="string">"im_blown"</span>];</div><div class="line">   <span class="keyword">var</span> a = <span class="string">"mw-strobe_light"</span>;</div><div class="line">   <span class="comment">/* harlem-shake-style.css，替换成你的位置，也可以直接使用：//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css */</span></div><div class="line">   <span class="keyword">var</span> f = <span class="string">"//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css"</span>;</div><div class="line">   </div><div class="line">   <span class="keyword">var</span> l = <span class="string">"mw_added_css"</span>;</div><div class="line">   <span class="keyword">var</span> b = g();</div><div class="line">   <span class="keyword">var</span> w = y();</div><div class="line">   <span class="keyword">var</span> C = document<span class="variable">.getElementsByTagName</span>(<span class="string">"*"</span>);</div><div class="line">   <span class="keyword">var</span> k = <span class="literal">null</span>;</div><div class="line">   <span class="keyword">for</span> (<span class="keyword">var</span> L = <span class="number">0</span>; L &lt; C<span class="variable">.length</span>; L++) &#123;</div><div class="line">       <span class="keyword">var</span> A = C[L];</div><div class="line">       <span class="keyword">if</span> (v(A)) &#123;</div><div class="line">           <span class="keyword">if</span> (E(A)) &#123;</div><div class="line">               k = A;</div><div class="line">               <span class="keyword">break</span></div><div class="line">           &#125;</div><div class="line">       &#125;</div><div class="line">   &#125;</div><div class="line">   <span class="keyword">if</span> (A === <span class="literal">null</span>) &#123;</div><div class="line">       console<span class="variable">.warn</span>(<span class="string">"Could not find a node of the right size. Please try a different page."</span>);</div><div class="line">       <span class="keyword">return</span></div><div class="line">   &#125;</div><div class="line">   c();</div><div class="line">   S();</div><div class="line">   <span class="keyword">var</span> O = [];</div><div class="line">   <span class="keyword">for</span> (<span class="keyword">var</span> L = <span class="number">0</span>; L &lt; C<span class="variable">.length</span>; L++) &#123;</div><div class="line">       <span class="keyword">var</span> A = C[L];</div><div class="line">       <span class="keyword">if</span> (v(A)) &#123;</div><div class="line">           O<span class="variable">.push</span>(A)</div><div class="line">       &#125;</div><div class="line">   &#125;</div><div class="line">   &#125;)()'&gt;&lt;i <span class="keyword">class</span>=<span class="string">"menu-item-icon fa fa-music fa-fw"</span>&gt;&lt;/i&gt;High&lt;/a&gt;</div><div class="line">&lt;/div&gt;</div><div class="line">         &lt;!-- <span class="keyword">end</span> High一下 --&gt;</div><div class="line">        &#123;% endif %&#125;</div></pre></td></tr></table></figure></p>
<p>如果需要并排显示，像这样子：<img src="http://ofyfogrgx.bkt.clouddn.com/blog/20161205/154359849.png" alt="mark"><br>修改文件：<strong>\themes\source\css_schemes\Pisces（主题风格对应的文件夹）_sidebar.styl</strong><br>找到这样一段，把<strong>display: block;</strong>改为<strong>display: inline-block;</strong><br><figure class="highlight stylus"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.feed-link</span> <span class="selector-tag">a</span> &#123;</div><div class="line">  <span class="attribute">display</span>: inline-block;   <span class="comment">//并行显示，block则为分行显示</span></div><div class="line">  <span class="attribute">color</span>: <span class="variable">$orange</span>;</div><div class="line">  <span class="attribute">border</span>: none;</div></pre></td></tr></table></figure></p>
<hr>
<h3 id="给-Github-添加-README"><a href="#给-Github-添加-README" class="headerlink" title="给 Github 添加 README"></a>给 Github 添加 README</h3><p>默认情况下，Github中每一个项目，我们希望有一份<strong>README.md</strong>的文件来作为项目的说明，但是我们在项目根目录下的<code>blog\source</code>目录下创建一份<strong>README.md</strong>文件，写好说明介绍，部署的时候，这个<strong>README.md</strong>会被hexo解析掉，而不会被解析到Github中去的。<br>正确的解决方法其实很简单：<br><strong> 把<code>README.md</code>文件的后缀名改成”MDOWN”然后扔到<code>blog\source</code>文件夹下即可，这样hexo不会解析，Github也会将其作为MD文件解析。 </strong></p>
<p>或者你还可以在站点配置文件中修改，以禁止编译文件。<br><figure class="highlight avrasm"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="symbol">skip_render:</span></div><div class="line">    - README.md</div></pre></td></tr></table></figure></p>
<hr>
<h3 id="加入左上角「fork-me-on-github」"><a href="#加入左上角「fork-me-on-github」" class="headerlink" title="加入左上角「fork me on github」"></a>加入左上角「fork me on github」</h3><p><a href="https://github.com/blog/273-github-ribbons" target="_blank" rel="external">github官方教程</a></p>
<hr>
<h3 id="给-Blog-添加-LICENSE"><a href="#给-Blog-添加-LICENSE" class="headerlink" title="给 Blog 添加 LICENSE"></a>给 Blog 添加 LICENSE</h3><p>修改主题配置文件中的 160 行左右：</p>
<figure class="highlight stata"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"># Creative Commons 4.0 International License.</div><div class="line"># http:<span class="comment">//creativecommons.org/</span></div><div class="line"># Available: <span class="keyword">by</span> | <span class="keyword">by</span>-nc | <span class="keyword">by</span>-nc-nd | <span class="keyword">by</span>-nc-<span class="keyword">sa</span> | <span class="keyword">by</span>-nd | <span class="keyword">by</span>-<span class="keyword">sa</span> | zero</div><div class="line">creative_commons: <span class="keyword">by</span>-nc-<span class="keyword">sa</span></div><div class="line">#creative_commons:</div></pre></td></tr></table></figure>
<p>取消第 4 行的注释，然后选择你想使用的 LICENSE 即可，可选项参照第 3 行。</p>
<hr>
<h3 id="错误信息"><a href="#错误信息" class="headerlink" title="错误信息"></a>错误信息</h3><p><strong>LF will be replaced</strong><br>Windows 提交命令的时候出现 <strong>warning: LF will be replaced by CRLF in XXXXXXXXXXXXXX</strong> 的警告。输入命令：<br><figure class="highlight autoit"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">git config --<span class="keyword">global</span> core.autocrlf <span class="literal">false</span></div></pre></td></tr></table></figure></p>
<hr>
<h1 id="部署"><a href="#部署" class="headerlink" title="部署"></a>部署</h1><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">cd</span> your_site/</div><div class="line">touch Staticfile  <span class="comment">#创建静态文件标识，用于Github识别，名字必须是Staticfile</span></div><div class="line">hexo clean   <span class="comment">#清除以前生成的旧文件</span></div><div class="line">hexo g       <span class="comment">#生成新的站点文件</span></div><div class="line">hexo d       <span class="comment">#部署到Github上</span></div></pre></td></tr></table></figure>
<p>可参考：<a href="http://shomy.top/2016/03/03/hexo-in-coding-github/" target="_blank" rel="external">http://shomy.top/2016/03/03/hexo-in-coding-github/</a><br>部署完成打开网址就能看到效果了。</p>
<p>Hexo的部署只会把生成的文件上传到仓库中，本地的<strong>设置，主题，*.md文件</strong>等等都不会上传，换一台电脑就没法干活了，一旦删除，那基本上所有的努力都白费了，这里介绍2种备份方法：</p>
<ul>
<li>1.新建一个仓库专门用来存放这些文件（最安全最方便的办法）</li>
<li>2.和发布的网站使用同一个仓库，master用来存放这些文件，新建分支来发布网站（注意pages服务绑定该分支，不要合并分支，一旦合并就全部混乱了）<br>两种方法都要在网站根目录设定好远程端仓库：<code>git add remote XXXX</code><br>每次发布完网页，就顺手执行以下代码，把文档也同步到仓库中。<figure class="highlight dockerfile"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">git <span class="keyword">add</span><span class="bash"> .</span></div><div class="line">git commit -m <span class="string">"xxx"</span></div><div class="line">git push</div></pre></td></tr></table></figure>
</li>
</ul>
<hr>
<h1 id="绑定域名"><a href="#绑定域名" class="headerlink" title="绑定域名"></a>绑定域名</h1><p>原理是域名提供商的域名指向github或coding的域名服务器，在项目内建立CNAME的域名指向文件后，会自动去自己的域名服务器github或coding上查找该域名，找到啦就绑定在一起，找不到就绑定不了；如果绑定不了，那么域名指向的github和coding（Pages绑定域名时）服务器会报404错误；域名指向的coding（Pages页面没有绑定域名时）域名服务器会把index当做普通超文本解析，不会加载js、cs等资源。</p>
<ul>
<li>1· 在你的项目下新建一个<strong>CNAME</strong>文件，注意没有后缀名。在里面添加你的域名，一行一个，如我的就是<strong> www.leolan.top</strong>和<strong> leolan.top</strong>（github会自动绑定第一个，第二个也要绑定，不绑定访问报404错误），然后推送<strong>CNAME文件</strong>到远程仓库。（Github不建议在pages页上绑定设置，页面上是只能绑定一个的）；Coding的话要在<strong>CNAME文件</strong>里绑定两个，在Pages页面也绑定两个。</li>
<li>2· 到域名服务商那里增加你的CNAME记录。添加两条记录，@和www的主机记录，记录类型为CNAME，记录值为 <code>username.github.io.</code>，重要的是 io 后面还有一个原点（看官方帮助文档Coding的就不用加点），切记。<br><img src="http://ofyfogrgx.bkt.clouddn.com//blog/%E5%9F%9F%E5%90%8D%E7%BB%91%E5%AE%9A.png" alt=""><br>过几分钟，刷新网页，就能直接用域名访问了，因为是在项目内建的<strong>CNAME</strong>文件，所以域名直接指向此项目文件夹，其他项目可以用其他域名设定。</li>
</ul>
<hr>

<!--这里是每篇文章的尾巴-->
<html>
  <body>
    <h1>结语</h1>
      <p>如果您觉得本博客还不错，欢迎继续关注本博客，欢迎多提宝贵意见，非常感谢！</p>
      <div style="text-align:center;color:#ccc;font-size:14px;">------本文结束<i class="fa fa-paw"></i>感谢阅读------</div>
  </body>
</html>

<!--
<html>
  <body>
    <h2 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h2>
    <blockquote><p>如果您觉得本博客还不错，欢迎继续关注本博客，欢迎多提宝贵意见，非常感谢！</p></blockquote></div>
    <div style="text-align:center;color:#ccc;font-size:14px;">------本文结束<i class="fa fa-paw"></i>感谢阅读------</div>
  </body>
</html>

<html>
  <body>
    <h2 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h2>
    <blockquote><p>如果您觉得本博客还不错，欢迎收藏书签，欢迎多提宝贵意见，非常感谢！</p>
    <footer><strong>Welcome to LeoLan'S BLOG</strong>
    <cite><a href="#" onclick="go_my_site()" rel="external">Leo Lan Blog Share For you!</a></cite></footer></blockquote></div>
  </body>
</html>
-->
      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        
<div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center">
  <div style="margin-bottom: 10px;font-size: 16px;font-weight: 600;">您的支持将鼓励我继续创作,非常感谢！</div>
  <button id="rewardButton", disable="enable", onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}", style="cursor: pointer; border: 0; outline: 0; border-radius: 100%; padding: 0; margin: 0; letter-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none">
    <span onmouseover="this.style.color='rgb(236,96,0)';this.style.background='rgb(204,204,204)'" onMouseOut="this.style.color='#fff';this.style.background='rgb(236,96,0)'" style="display: inline-block; width: 70px; height: 70px; border-radius: 100%; line-height: 81px; color: #fff; font: 400 35px/75px 'microsofty'; background: rgb(236,96,0)">赏</span>
  </button>
    <div id="QR" style="display: none;">
      
        <div id="alipay" style="display: inline-block">
          <img id="alipay_qr" src="http://ofyfogrgx.bkt.clouddn.com//pay/alipay.jpg" alt="LeoLan Alipay" style="width: 200px; max-width: 100%; display: inline-block"/>
          <p>支付宝打赏</p>
        </div>
      
      
        <div id="wechat" style="display: inline-block">
          <img id="wechat_qr" src="http://ofyfogrgx.bkt.clouddn.com//pay/weixinpay.png" alt="LeoLan WeChat Pay" style="width: 200px; max-width: 100%; display: inline-block"/>
          <p>微信打赏</p>
        </div>
      
    </div>
  </div>


<h3 id="最近访客"><a href="#最近访客" class="headerlink" title="最近访客"></a>最近访客</h3><div class="ds-recent-visitors" data-num-items="28" data-avatar-size="42" id="ds-recent-visitors"></div>
      
    </div>

<!--这是文章底部标签云链接
    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/用Hexo搭建博客/" rel="tag"># 用Hexo搭建博客</a>
          
            <a href="/tags/Hexo-github/" rel="tag"># Hexo github</a>
          
            <a href="/tags/Hexo-Coding/" rel="tag"># Hexo Coding</a>
          
            <a href="/tags/Next-定制/" rel="tag"># Next 定制</a>
          
        </div>
      
-->
      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/posts/56436/" rel="next" title="用Jekyll搭建博客">
                <i class="fa fa-chevron-left"></i> 用Jekyll搭建博客
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/posts/34699/" rel="prev" title="jenkins">
                jenkins <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
        
<script>
  with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js;
</script>

      
    </div>
  </div>


          </div>
          

  <p>热评文章</p>
  <div class="ds-top-threads" data-range="weekly" data-num-items="4"></div>


          
  <div class="comments" id="comments">
    
      <div class="ds-thread" data-thread-key="posts/23632/"
           data-title="用Hexo搭建博客" data-url="https://www.leolan.top/posts/23632/">
      </div>
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/images/avatar.jpg"
               alt="LeoLan" />
          <p class="site-author-name" itemprop="name">LeoLan</p>
          <p class="site-description motion-element" itemprop="description">Better late than never</p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">56</span>
              <span class="site-state-item-name">日志</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              <a href="/categories">
                <span class="site-state-item-count">14</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">80</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        
          <div class="feed-link motion-element">
            <a href="https://www.leolan.top/atom.xml" rel="alternate">
              <i class="fa fa-rss"></i>
              RSS
            </a>

<!-- 自定义High一下的功能 -->
 <a rel="alternate" class="mw-harlem_shake_slow wobble shake" href='javascript:(
   function go() {
   var songs = [
               "http://ofyfogrgx.bkt.clouddn.com/tongxingSibel%20-%20Im%20Sorry.mp3",
               "http://ofyfogrgx.bkt.clouddn.com/Music-sunburst.mp3",
               "http://ofyfogrgx.bkt.clouddn.com/blog/20161115/150103346.mp3",
               "http://ofyfogrgx.bkt.clouddn.com/blog/20161115/150842689.mp3",
               "http://ofyfogrgx.bkt.clouddn.com//blog/Apple%20&%20Stone%20-%20Lost.mp3"
   ];
   
   function c() {
       var e = document.createElement("link");
       e.setAttribute("type", "text/css");
       e.setAttribute("rel", "stylesheet");
       e.setAttribute("href", f);
       e.setAttribute("class", l);
       document.body.appendChild(e)
   }
   function h() {
       var e = document.getElementsByClassName(l);
       for (var t = 0; t < e.length; t++) {
           document.body.removeChild(e[t])
       }
   }
   function p() {
       var e = document.createElement("div");
       e.setAttribute("class", a);
       document.body.appendChild(e);
       setTimeout(function() {
           document.body.removeChild(e)
       }, 100)
   }
   function d(e) {
       return {
           height : e.offsetHeight,
           width : e.offsetWidth
       }
   }
   function v(i) {
       var s = d(i);
       return s.height > e && s.height < n && s.width > t && s.width < r
   }
   function m(e) {
       var t = e;
       var n = 0;
       while (!!t) {
           n += t.offsetTop;
           t = t.offsetParent
       }
       return n
   }
   function g() {
       var e = document.documentElement;
       if (!!window.innerWidth) {
           return window.innerHeight
       } else if (e && !isNaN(e.clientHeight)) {
           return e.clientHeight
       }
       return 0
   }
   function y() {
       if (window.pageYOffset) {
           return window.pageYOffset
       }
       return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
   }
   function E(e) {
       var t = m(e);
       return t >= w && t <= b + w
   }
   function S() {
       var e = document.getElementById("audio_element_id");
       if(e != null){
           var index = parseInt(e.getAttribute("curSongIndex"));
           if(index > songs.length - 2) {
               index = 0;
           } else {
               index++;
           }
           e.setAttribute("curSongIndex", index);
           N();
       }
       e.src = i;
       e.play()
   }
   function x(e) {
       e.className += " " + s + " " + o
   }
   function T(e) {
       e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
   }
   function N() {
       var e = document.getElementsByClassName(s);
       var t = new RegExp("\\b" + s + "\\b");
       for (var n = 0; n < e.length; ) {
           e[n].className = e[n].className.replace(t, "")
       }
   }
   function initAudioEle() {
       var e = document.getElementById("audio_element_id");
       if(e === null){
           e = document.createElement("audio");
           e.setAttribute("class", l);
           e.setAttribute("curSongIndex", 0);
           e.id = "audio_element_id";
           e.loop = false;
           e.bgcolor = 0;
           e.addEventListener("canplay", function() {
           setTimeout(function() {
               x(k)
           }, 500);
           setTimeout(function() {
               N();
               p();
               for (var e = 0; e < O.length; e++) {
                   T(O[e])
               }
           }, 15500)
       }, true);
       e.addEventListener("ended", function() {
           N();
           h();
           go();
       }, true);
       e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
       document.body.appendChild(e);
       }
   }
   
   initAudioEle();
   var e = 30;
   var t = 30;
   var n = 350;
   var r = 350;
   var curSongIndex = parseInt(document.getElementById("audio_element_id").getAttribute("curSongIndex"));
   var i = songs[curSongIndex];
   
   var s = "mw-harlem_shake_me";
   var o = "im_first";
   var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
   var a = "mw-strobe_light";
   /* harlem-shake-style.css，替换成你的位置，也可以直接使用：//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css */
   var f = "//7xncbk.com1.z0.glb.clouddn.com/harlem-shake-style.css";  
   /* var f = "/css/harlem_shake_style.css";  */

   var l = "mw_added_css";
   var b = g();
   var w = y();
   var C = document.getElementsByTagName("*");
   var k = null;
   for (var L = 0; L < C.length; L++) {
       var A = C[L];
       if (v(A)) {
           if (E(A)) {
               k = A;
               break
           }
       }
   }
   if (A === null) {
       console.warn("Could not find a node of the right size. Please try a different page.");
       return
   }
   c();
   S();
   var O = [];
   for (var L = 0; L < C.length; L++) {
       var A = C[L];
       if (v(A)) {
           O.push(A)
       }
   }
   })()'><i class="menu-item-icon fa fa-music fa-fw"></i>High</a>
</div>
         <!-- end High一下 -->
        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/myleolan" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://coding.net/u/leolan" target="_blank" title="Coding">
                  
                    <i class="fa fa-fw fa-github-alt"></i>
                  
                  Coding
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://quickconnect.to/myleolan" target="_blank" title="Cloud">
                  
                    <i class="fa fa-fw fa-cloud"></i>
                  
                  Cloud
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://git.oschina.net/leolan" target="_blank" title="OSchina">
                  
                    <i class="fa fa-fw fa-git-square"></i>
                  
                  OSchina
                </a>
              </span>
            
          
        </div>

        
        

        
        
          <div class="links-of-blogroll motion-element links-of-blogroll-inline">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-heartbeat"></i>
              友链
            </div>
            <ul class="links-of-blogroll-list">
              
                <li class="links-of-blogroll-item">
                  <a href="https://jerry.hk/" title="Jerry Locke" target="_blank" rel="external nofollow">Jerry Locke</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://login926.top" title="Raintons" target="_blank" rel="external nofollow">Raintons</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://www.iamlj.com/" title="Jing's Blog" target="_blank" rel="external nofollow">Jing's Blog</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="https://haiwx.github.io/" title="E-Loli" target="_blank" rel="external nofollow">E-Loli</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://cyang.tech/" title="cyang's blog" target="_blank" rel="external nofollow">cyang's blog</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="https://www.anotherhome.net" title="DIYgod" target="_blank" rel="external nofollow">DIYgod</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://lusongsong.com/" title="卢松松的博客" target="_blank" rel="external nofollow">卢松松的博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://v.lusongsong.com/" title="松松视频" target="_blank" rel="external nofollow">松松视频</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://mblack.cn/" title="小黑" target="_blank" rel="external nofollow">小黑</a>
                </li>
              
            </ul>
          </div>
        

        

      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#安装Hexo"><span class="nav-number">1.</span> <span class="nav-text">安装Hexo</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#安装Node-js"><span class="nav-number">1.1.</span> <span class="nav-text">安装Node.js</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#安装Hexo-1"><span class="nav-number">1.2.</span> <span class="nav-text">安装Hexo</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#配置优化、定制站点"><span class="nav-number">2.</span> <span class="nav-text">配置优化、定制站点</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#站点配置"><span class="nav-number">2.1.</span> <span class="nav-text">站点配置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#主题配置"><span class="nav-number">2.2.</span> <span class="nav-text">主题配置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#安装插件"><span class="nav-number">2.3.</span> <span class="nav-text">安装插件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#自由定制"><span class="nav-number">2.4.</span> <span class="nav-text">自由定制</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#文章字数、阅读时长统计"><span class="nav-number">2.4.1.</span> <span class="nav-text">文章字数、阅读时长统计</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#文章结语"><span class="nav-number">2.4.2.</span> <span class="nav-text">文章结语</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#文章底部的标签云锚点"><span class="nav-number">2.4.3.</span> <span class="nav-text">文章底部的标签云锚点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#不蒜子网站访问量统计、删除NEXT主题自带尾巴"><span class="nav-number">2.4.4.</span> <span class="nav-text">不蒜子网站访问量统计、删除NEXT主题自带尾巴</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#居中模块"><span class="nav-number">2.4.5.</span> <span class="nav-text">居中模块</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#留言板"><span class="nav-number">2.4.6.</span> <span class="nav-text">留言板</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#字体"><span class="nav-number">2.4.7.</span> <span class="nav-text">字体</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#404页面"><span class="nav-number">2.4.8.</span> <span class="nav-text">404页面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#打赏"><span class="nav-number">2.4.9.</span> <span class="nav-text">打赏</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#最近访客"><span class="nav-number">2.4.10.</span> <span class="nav-text">最近访客</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#SEO"><span class="nav-number">2.4.11.</span> <span class="nav-text">SEO</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#网站地图"><span class="nav-number">2.4.11.1.</span> <span class="nav-text">网站地图</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#蜘蛛协议"><span class="nav-number">2.4.11.2.</span> <span class="nav-text">蜘蛛协议</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#NexT主题，首页title的优化"><span class="nav-number">2.4.11.3.</span> <span class="nav-text">NexT主题，首页title的优化</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#限制出站链接"><span class="nav-number">2.4.11.4.</span> <span class="nav-text">限制出站链接</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#文章链接唯一化"><span class="nav-number">2.4.11.5.</span> <span class="nav-text">文章链接唯一化</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#百度网址推送"><span class="nav-number">2.4.11.6.</span> <span class="nav-text">百度网址推送</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#主动推送新链接"><span class="nav-number">2.4.11.7.</span> <span class="nav-text">主动推送新链接</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#向百度提交所有链接"><span class="nav-number">2.4.11.8.</span> <span class="nav-text">向百度提交所有链接</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#语法优化"><span class="nav-number">2.4.12.</span> <span class="nav-text">语法优化</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#页面留白-扩大显示范围"><span class="nav-number">2.4.13.</span> <span class="nav-text">页面留白(扩大显示范围)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#多说评论框自定义css"><span class="nav-number">2.4.14.</span> <span class="nav-text">多说评论框自定义css</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#解决多说评论不稳定、加载慢"><span class="nav-number">2.4.15.</span> <span class="nav-text">解决多说评论不稳定、加载慢</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#多说userid"><span class="nav-number">2.4.16.</span> <span class="nav-text">多说userid</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#动态背景"><span class="nav-number">2.4.17.</span> <span class="nav-text">动态背景</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#背景透明"><span class="nav-number">2.4.18.</span> <span class="nav-text">背景透明</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#背景放图片"><span class="nav-number">2.4.19.</span> <span class="nav-text">背景放图片</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#修改文章超链接样式"><span class="nav-number">2.4.20.</span> <span class="nav-text">修改文章超链接样式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#High一下"><span class="nav-number">2.4.21.</span> <span class="nav-text">High一下</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#第一种"><span class="nav-number">2.4.21.1.</span> <span class="nav-text">第一种</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#第二种"><span class="nav-number">2.4.21.2.</span> <span class="nav-text">第二种</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#给-Github-添加-README"><span class="nav-number">2.4.22.</span> <span class="nav-text">给 Github 添加 README</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#加入左上角「fork-me-on-github」"><span class="nav-number">2.4.23.</span> <span class="nav-text">加入左上角「fork me on github」</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#给-Blog-添加-LICENSE"><span class="nav-number">2.4.24.</span> <span class="nav-text">给 Blog 添加 LICENSE</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#错误信息"><span class="nav-number">2.4.25.</span> <span class="nav-text">错误信息</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#部署"><span class="nav-number">3.</span> <span class="nav-text">部署</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#绑定域名"><span class="nav-number">4.</span> <span class="nav-text">绑定域名</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2016</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">LeoLan</span>
</div>

<div class="powered-by">
  粤ICP325436-2 | 本站总访问量<span id="busuanzi_value_site_pv"></span>
</div>

<div class="theme-info">
  您是第<span id="busuanzi_value_site_uv"></span>位小伙伴
</div>

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>


        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.0"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.0"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.0"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.0"></script>



  

  
    
  

  <script type="text/javascript">
    var duoshuoQuery = {short_name:"leolan"};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.id = 'duoshuo-script';
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '/js/src/duoshuo_embed.js';
      ds.charset = 'UTF-8';
      (document.getElementById('footer')
      || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
  </script>

  
    
      
      <script src="/lib/ua-parser-js/dist/ua-parser.min.js?v=0.7.9"></script>
      <script src="/js/src/hook-duoshuo.js?v=5.1.0"></script>
    
    
    <script src="/lib/ua-parser-js/dist/ua-parser.min.js?v=0.7.9"></script>
    <script src="/js/src/hook-duoshuo.js"></script>
  








  
  
  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length == 0) {
      search_path = "search.xml";
    }
    var path = "/" + search_path;
    // monitor main search box;

    function proceedsearch() {
      $("body").append('<div class="popoverlay">').css('overflow', 'hidden');
      $('.popup').toggle();
    }
    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';
      $.ajax({
        url: path,
        dataType: "xml",
        async: true,
        success: function( xmlResponse ) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = $( "entry", xmlResponse ).map(function() {
            return {
              title: $( "title", this ).text(),
              content: $("content",this).text(),
              url: $( "url" , this).text()
            };
          }).get();
          var $input = document.getElementById(search_id);
          var $resultContent = document.getElementById(content_id);
          $input.addEventListener('input', function(){
            var matchcounts = 0;
            var str='<ul class=\"search-result-list\">';
            var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
            $resultContent.innerHTML = "";
            if (this.value.trim().length > 1) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var content_index = [];
                var data_title = data.title.trim().toLowerCase();
                var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
                var data_url = decodeURIComponent(data.url);
                var index_title = -1;
                var index_content = -1;
                var first_occur = -1;
                // only match artiles with not empty titles and contents
                if(data_title != '') {
                  keywords.forEach(function(keyword, i) {
                    index_title = data_title.indexOf(keyword);
                    index_content = data_content.indexOf(keyword);
                    if( index_title >= 0 || index_content >= 0 ){
                      isMatch = true;
                      if (i == 0) {
                        first_occur = index_content;
                      }
                    }

                  });
                }
                // show search results
                if (isMatch) {
                  matchcounts += 1;
                  str += "<li><a href='"+ data_url +"' class='search-result-title'>"+ data_title +"</a>";
                  var content = data.content.trim().replace(/<[^>]+>/g,"");
                  if (first_occur >= 0) {
                    // cut out 100 characters
                    var start = first_occur - 20;
                    var end = first_occur + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if(start == 0){
                      end = 50;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    var match_content = content.substring(start, end);
                    // highlight all keywords
                    keywords.forEach(function(keyword){
                      var regS = new RegExp(keyword, "gi");
                      match_content = match_content.replace(regS, "<b class=\"search-keyword\">"+keyword+"</b>");
                    });

                    str += "<p class=\"search-result\">" + match_content +"...</p>"
                  }
                  str += "</li>";
                }
              })};
            str += "</ul>";
            if (matchcounts == 0) { str = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>' }
            if (keywords == "") { str = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>' }
            $resultContent.innerHTML = str;
          });
          proceedsearch();
        }
      });}

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched == false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(function(e){
      $('.popup').hide();
      $(".popoverlay").remove();
      $('body').css('overflow', '');
    });
    $('.popup').click(function(e){
      e.stopPropagation();
    });
  </script>


  

  

  
  <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
  <script>AV.initialize("zieuxKa4IjAP6VgxxvBe4vkj-gzGzoHsz", "MHGN54IEuofFNV1AROiRkEoG");</script>
  <script>
    function showTime(Counter) {
      var query = new AV.Query(Counter);
      var entries = [];
      var $visitors = $(".leancloud_visitors");

      $visitors.each(function () {
        entries.push( $(this).attr("id").trim() );
      });

      query.containedIn('url', entries);
      query.find()
        .done(function (results) {
          var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

          if (results.length === 0) {
            $visitors.find(COUNT_CONTAINER_REF).text(0);
            return;
          }

          for (var i = 0; i < results.length; i++) {
            var item = results[i];
            var url = item.get('url');
            var time = item.get('time');
            var element = document.getElementById(url);

            $(element).find(COUNT_CONTAINER_REF).text(time);
          }
          for(var i = 0; i < entries.length; i++) {
            var url = entries[i];
            var element = document.getElementById(url);
            var countSpan = $(element).find(COUNT_CONTAINER_REF);
            if( countSpan.text() == '') {
              countSpan.text(0);
            }
          }
        })
        .fail(function (object, error) {
          console.log("Error: " + error.code + " " + error.message);
        });
    }

    function addCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      query.equalTo("url", url);
      query.find({
        success: function(results) {
          if (results.length > 0) {
            var counter = results[0];
            counter.fetchWhenSave(true);
            counter.increment("time");
            counter.save(null, {
              success: function(counter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(counter.get('time'));
              },
              error: function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            });
          } else {
            var newcounter = new Counter();
            /* Set ACL */
            var acl = new AV.ACL();
            acl.setPublicReadAccess(true);
            acl.setPublicWriteAccess(true);
            newcounter.setACL(acl);
            /* End Set ACL */
            newcounter.set("title", title);
            newcounter.set("url", url);
            newcounter.set("time", 1);
            newcounter.save(null, {
              success: function(newcounter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
              },
              error: function(newcounter, error) {
                console.log('Failed to create');
              }
            });
          }
        },
        error: function(error) {
          console.log('Error:' + error.code + " " + error.message);
        }
      });
    }

    $(function() {
      var Counter = AV.Object.extend("Counter");
      if ($('.leancloud_visitors').length == 1) {
        addCount(Counter);
      } else if ($('.post-title-link').length > 1) {
        showTime(Counter);
      }
    });
  </script>



  
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>


  


<!-- 背景动画 -->
<script type="text/javascript" src="/js/src/particle.js" count="50" zindex="-2" opacity="1" color="0,104,183"></script>

</body>
</html>
